title: How to close bootstrap modal window from angularjs
body: <p>I am using modal window for the upload of images. But when click on upload I want to upload the images and then close the modal window. When I used <code>data-dismiss="modal"</code> as attribute in button it just closed the window and did nothing else. So I found some options how to close it but everything was with the help of Jquery e.g.: <code>$('#my-modal').modal('hide');</code> but I am using angular and try to do it in controller but I did not succeeded. I also try these answers <a href="https://stackoverflow.com/questions/19588983/closing-bootstrap-modal-onclick">Closing Bootstrap modal onclick</a> but with no luck. </p>
  
  <p>Finally I did it this way:</p>
  
  <pre><code>document.getElementById('fileUpload').value = null;
  var dialog = document.getElementById('complete-dialog');
  dialog.style.display = 'none';
  dialog.className = 'modal fade';
  dialog.setAttribute('aria-hidden', 'true');
  dialog.removeChild(dialog.firstChild);
  </code></pre>
  
  <p>and it closes modal window but then I cannot scroll on my web page. I have no idea how to do it better.</p>
  
  <p>Can anybody help me to figure it out how to close the modal window from angularjs or at least how can I use jquery inside of angularjs?</p>
  
  <p>EDIT:
  HTML where I open modal window:</p>
  
  <pre><code>&lt;div class="image col-lg-2 col-lg-offset-2 col-md-3 col-md-offset-1 col-sm-3 col-sm-offset-1"&gt;
  &lt;button class="btn btn-fab btn-raised btn-primary" data-toggle="modal" data-target="#complete-dialog"&gt;&lt;i class="mdi-image-edit"&gt;&lt;/i&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>HTML modal window:</p>
  
  <pre><code>&lt;div id="complete-dialog" class="modal fade" tabindex="-1"&gt;
          &lt;div id="test-dialog" class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close close-btn" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
                      &lt;h4 class="modal-title" style="color: black;"&gt;Upload profile picture&lt;/h4&gt;
                  &lt;/div&gt;
  
                  &lt;div class="modal-body" style="color: black;"&gt;
                      &lt;form name="userForm" data-ng-submit="profile.uploadImageToServer()" autocomplete="off"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;!--&lt;label for="fileUpload"&gt;Profile image&lt;/label&gt;--&gt;
                              &lt;input type="file" name="fileUpload" id="fileUpload" onchange="angular.element(this).scope().uploadImg(this.files)"&gt;
                          &lt;/div&gt;
                          &lt;div class="text-center form-group"&gt;
                              &lt;button id="submit-btn" type="submit" class="btn btn-large btn-primary"&gt;Upload Image&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
  
                  &lt;/div&gt;
                  &lt;!--&lt;div class="modal-footer"&gt;--&gt;
                  &lt;!--&lt;/div&gt;--&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Angular controller:</p>
  
  <pre><code>me.uploadImageToServer = function(){
              console.log('uploading');
              console.log($scope.file);
              var fd = new FormData();
              //Take the first selected file
              fd.append('file', $scope.file[0]);
  
              if($scope.file.length&gt;0) {
  
                  me.user.image = '/img/'+ me.user._id + (($scope.file[0].type.indexOf('png') &gt; -1) ? '.png' : '.jpg');
                  User.update(me.user, function(response){
                      AuthenticationState.user = response.data;
                  }, function(response){
                      console.log(response);
                  });
  
                  User.uploadImage(fd, function (response) {
                      console.log(response);
                      me.user.image = me.user.image + '?time=' + new Date().getTime();
                      AuthenticationState.user.image = me.user.image;
                      document.getElementById('fileUpload').value = null;
                      //var dialog = document.getElementById('complete-dialog');
                      //dialog.style.display = 'none';
                      //dialog.className = 'modal fade';
                      //dialog.setAttribute('aria-hidden', 'true');
                      //dialog.removeChild(dialog.firstChild);
                      $scope.$close(me.file);
                      me.file = [];
                  }, function (response) {
                      console.log(response);
                      me.file = [];
                  });
              }
          };
  </code></pre>