Modal .hide() not working

ionic-v1
1

I managed to load a modal into my application and submit some details over to a Server.
I would like on submit if the response from the server is “OK” to proceed and close/hide the modal.

I’m on the early steps, but I came across of the issue that the modal.hide(); is not working.
I’m not getting any errors on the console. It seems that the app completely ignores that line. But as we know compilers never ignores lines. I can’t figure out what the issue is, though.

Here’s my controller:

app.controller('AppCtrl', function($scope, $localStorage, $http, $ionicModal, $timeout) {
 $scope.data = {};

 $scope.change = function() {
  $localStorage.value = !$localStorage.value;
  $scope.value = $localStorage.value;

  $ionicModal.fromTemplateUrl('templates/modal.html', {
   scope: $scope,
   animation: 'slide-in-up'
  }).then(function(modal) {
   $scope.modal = modal;
  });

  if ($localStorage.value == true) {
   console.log("Modal will pop up");
   $scope.modal.show();
   setTimeout(function() {
    $scope.modal.hide();
   }, 5000); // Not working as well
  } else {
   console.log("Unregister device");
  }

  console.log($localStorage.value);
 }

 $scope.submit = function() {
  var link = 'http://app.example.com/api.php';

  $ionicModal.fromTemplateUrl('templates/modal.html', {
   scope: $scope,
   animation: 'slide-in-up'
  }).then(function(modal) {
   $scope.modal = modal;
  });

  $http.post(link, {
    username: $scope.data.username,
    password: $scope.data.password
   }).then(function(res) {
    $scope.response = res.data;
    $localStorage.token = res.data;
    console.log($localStorage.token);
   })
   .catch(function(error) {
    console.error(error);
   })
   .finally(function() {
    $scope.modal.hide(); // this will execute no matter what happens with the http call!
    console.log("Finally Function"); //This line executed just fine
   });
 };
});

And this is a demonstration of the issue:

image