title: Accessing variable from controller in html
body: <p>I am trying to make an edit form pop-up as the show page but I am unable to get the data in popup html.
  Pop-up Code:</p>
  
  <pre><code> &lt;script type="text/ng-template" id="myModalContent.html"&gt;
    &lt;div class="modal-header"&gt;
        &lt;h3 class="modal-title"&gt;I am a modal!&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      &lt;h1&gt;{{ visitor11.first_name }}&lt;/h1&gt;       
      &lt;div ng-app="VisitorCenter" ng-controller="visitorsController"&gt;
        &lt;div ng-repeat="visitor22 in visitors"&gt;
          &lt;p&gt;{{ visitor22.first_name }} {{ visitor22.last_name }}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="modal-footer"&gt;
        &lt;button class="btn btn-primary" ng-click="ok()"&gt;OK&lt;/button&gt;
        &lt;button class="btn btn-warning" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
    &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>But this "{{ visitor11.first_name }}" is not working.</p>
  
  <p>Js file:</p>
  
  <pre><code>$scope.open = function (index) {
  
  visitor = $scope.visitors[index]
  var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html',
    controller: 'ModalInstanceCtrl',
    // size: size,
    resolve: {
      visitor11: function(){
        alert(visitor.first_name +" "+ visitor.last_name);
        return visitor;
      }
    }
  });
  
  return visitor;
  
  };
  </code></pre>
  
  <p>ModalInstanceCtrl:</p>
  
  <pre><code> visitorCenter.controller('ModalInstanceCtrl', function ($scope, $modalInstance) {
  
     $scope.ok = function () {
      $modalInstance.close();
     };
  
     $scope.cancel = function () {
      $modalInstance.dismiss('cancel');
     };
   });
  </code></pre>
  
  <p>How can I get this 'visitor' object in my popup html.
  Please don't try to make any sense of my code above because it won't make any. i am just doing random stuff for learning angularJs. Just look at the problem.</p>