title: AngularJS + Bootstrap - Modal window does not close after location change
body: <p>In my registration form when user submits and if some of the requirements are not met, modal window is shown. In this window user can press back button, which hides the modal window (it is working) and force submit the form, which causes hiding the popup and $http.post being sent. Upon the successful response the location is changed. The problem is that the modal is not removed after the location change. </p>
  
  <p>How to handle such situation? I think i should wait somehow for view to update after setting popupVisible to false. How?</p>
  
  <p>Here is the code:</p>
  
  <p>Popup is shown if popupVisible is set to true.</p>
  
  <pre><code>&lt;popup visible="popupVisible"&gt;
          ...
          &lt;div style="text-align: center;"&gt;
              &lt;button name="back" class="btn btn-primary button-std" ng-click="hidePopup()" style="margin-right:15px;"&gt;Powrót&lt;/button&gt;
              &lt;button name="register" class="btn btn-primary button-ok" ng-click="save(true)"&gt;Utwórz konto&lt;/button&gt;
          &lt;/div&gt;
       &lt;/popup&gt;
  </code></pre>
  
  <p>Save method. If forced is set to true it should hide the popup then send request:</p>
  
  <pre><code>$scope.save = function(forced) {
          console.log('forced', forced);
          if (forced) {
               $scope.hidePopup();
          }else if (!$scope.user.marketingAccepted) {
              $scope.showPopup();
              return;
          }
  
          $http.post("rest/registration/register", $scope.user).then(function (response) {
              var data = response.data;
              if (data.success) {
                  $location.path("/confirmation");
              }else{
                  for (var i in fields) {
                      if (data.errors[fields[i]]) {
                          $scope.UserForm[fields[i]].$error.errorMessage = data.errors[fields[i]];
                      }else{
                          $scope.UserForm[fields[i]].$error.errorMessage = undefined;
                      }
                  }
                  $window.scrollTo(0, 0);
              }
          });
  </code></pre>
  
  <p>Method hidePopup is working correctly if called without location change.</p>
  
  <pre><code>$scope.hidePopup = function(){
          $scope.popupVisible = false;
      };
  </code></pre>
  
  <p>Popup definition:</p>
  
  <pre><code>angular.module('certum').directive('popup', function () {
      return {
          template: '&lt;div class="modal fade"&gt;' + 
              '&lt;div class="modal-dialog"&gt;' + 
                '&lt;div class="modal-content"&gt;' + 
                  '&lt;div class="modal-header"&gt;' + 
                    '&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;' + 
                    '&lt;h4 class="modal-title"&gt;Uwaga&lt;/h4&gt;' + 
                  '&lt;/div&gt;' + 
                  '&lt;div class="modal-body" ng-transclude&gt;&lt;/div&gt;' + 
                '&lt;/div&gt;' + 
              '&lt;/div&gt;' + 
            '&lt;/div&gt;',
          restrict: 'E',
          transclude: true,
          replace:true,
          scope:true,
          link: function postLink(scope, element, attrs) {
              scope.$watch(attrs.visible, function(value){
              if(value == true)
                $(element).modal('show');
              else
                $(element).modal('hide');
            });
  
            $(element).on('shown.bs.modal', function(){
              scope.$apply(function(){
                scope.$parent[attrs.visible] = true;
              });
            });
  
            $(element).on('hidden.bs.modal', function(){
              scope.$apply(function(){
                scope.$parent[attrs.visible] = false;
              });
            });
          }
        };
      });
  </code></pre>