title: AngularJs - modal window w/ajax loading
body: <p>I'm trying to enable a modal window pop up for elements on an application that displays more information (including things like comments etc) using ui.bootstrap (<a href="http://angular-ui.github.io/bootstrap/#/modal" rel="nofollow">http://angular-ui.github.io/bootstrap/#/modal</a>). The element is being loaded as a directive on the page, and I think i'm running into an issue with nested scopes, however it appears as though the modal window is triggering, but nothing is appearing (the screen fades).</p>
  
  <p>My directive looks like this:</p>
  
  <pre><code>    .directive('artifactCause', function() {
          return {
              restrict: 'E',
              replace: true,
              scope: {
                  thing: '=thing'
              },
              templateUrl: 'views/directives/artifact-cause.html',
              controller: function($scope, $element, $attrs, $modal) {
                  console.log('clicked');
                  $scope.open = function() {
  
                      var modalInstance = $modal.open({
                          backdrop: true,
                          keyboard: true,
                          controller: 'artifactModalCtrl',
                          templateUrl: 'views/directives/modal-artifact.html',
                          scope: $scope,
                          resolve: {
                              thing: function () {
                                  return $scope.thing.cause_id;
                              }
                          }
                      });
  
                  };
              }
          };
      });
  </code></pre>
  
  <p>and the artifactModealCtrl controller looks like this:</p>
  
  <pre><code>.controller('artifactModalCtrl', function($scope, $http, loggedStatus, thing) {
          var token = loggedStatus.token();
          $scope.close = function(result) {
              dialog.close(result);
          };
  
          $http.get( REQUEST_URL + '/Artifact/ArtifactDetail?token=' + token + '&amp;artifact_id=' + thing ).
              success(function(data) {
                  console.log(data);
                  $scope.thing = data.response;
                  return data.response;
              }).
              error(function(data) {
                  console.log('Error');
                  console.log(data);
              });
      })
  </code></pre>
  
  <p>I know that the data i'm receiving from my ajax call is successful as I can log it to the console. Any insight or pointers in the right direction would be muchly appreciated.</p>