title: scope is undefined AngularJS
body: <p>I'm new to AngularJS.<br>
  I'm trying to refresh certain Angular scope outside of Angular controller.</p>
  
  <p>I try to get the reference of the scope for this certain controller but I get <em>undefined</em>.<br>
  I've done a lot of searching but didn't find something that worked and i'm not sure what i'm doing wrong.</p>
  
  <p>Here is the code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="form-group" ng-app="cms"&gt;
  &lt;label class="col-md-2 control-label"&gt;Images&lt;/label&gt;
  &lt;div id="scope" class="col-md-10 mix-grid thumbnails" ng-controller="ImagesController"&gt;
      &lt;div class="col-md-2 col-sm-2 mix" ng-repeat="image in images"&gt;
          &lt;div class="mix-inner"&gt;
              &lt;img class="img-responsive" ng-src="/assets/user_uploads/pages/&lt;% image.image_name %&gt;" alt=""&gt;
              &lt;div class="mix-details"&gt;
                  &lt;a class="mix-icon icon-preview fancybox-button tooltips" data-placement="bottom" data-original-title="Preview" href="/assets/user_uploads/pages/&lt;% image.image_name %&gt;" data-rel="fancybox-button"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a class="mix-icon icon-edit tooltips" data-image-id="&lt;% image.id %&gt;" data-image-table="pages_images" data-placement="bottom" data-original-title="Edit"&gt;&lt;i class="fa fa-edit"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a ng-click="removeImage(image.id, image)" class="mix-icon icon-delete tooltips" data-placement="bottom" data-original-title="Delete"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>Angular JS</strong></p>
  
  <pre><code>var scope = angular.element($("#scope")).scope();
  function ImagesController($scope, $http)
  {
      $http.get('/admin/images/ajaxGetImages/{{ Request::segment(3) }}').success(function(images) {
          $scope.images = images;
      });
  
      $scope.removeImage = function(id, image) {
          bootbox.confirm("Delete the image?", function(result) {
              if (result) {
                  $http.post('/admin/images/ajaxRemoveImage/'+id).success(function() {
                      $scope.images.splice( $scope.images.indexOf(image), 1 );
                      bootbox.alert("Successfully deleted");
                  });
              }
          });
      },
  
      $scope.refresh = function() {
          $http.get('/admin/images/ajaxGetImages/{{ Request::segment(3) }}').success(function(images) {
              $scope.images = images;
          });
      }
  }
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$('.modal-footer .image-update').on('click', function() {
      var imageId = $(this).attr('data-image-id');
      var imageAlt = $('.modal-body #image_alt').val();
      var imageTitle = $('.modal-body #image_title').val();
      var imageLink = $('.modal-body #image_link').val();
      $.ajaxFileUpload({
          url            : '/admin/images/ajaxUpdatePageImage/'+imageId, 
          secureuri      : false,
          fileElementId  : 'image_new',
          dataType       : 'json',
          data           : { imageAlt: imageAlt , imageTitle: imageTitle , imageLink: imageLink },
          success        : function (data) {
              bootbox.alert("Successfully updated");
              $('.modal').modal('hide');
              scope.$apply(function(){
                  scope.refresh();
              });
          }
      });
  });
  </code></pre>
  
  <p>Will be thankful for any kind of help.</p>