title: Passing parameters from a controller to a modal directive
body: <p>I am trying to popup different modals based on which area of an imagemap is clicked. Each area of the imagemap is tied to information from a JSON file and I need to be able to refer to that information when creating the unique modal for each room. To do this i need the scope that my modal directive is under to access information in the scope of the main controller. I know there are similar questions posted and believe me I have tried to implement any solutions I have found but I cant get anything working. </p>
  
  <p>here is the app page including the controller and modal directive with comments mentioning things ive tried:</p>
  
  <pre><code>var myApp = angular.module('myApp', []);
  
  myApp.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
    $http.get('js/master.json').success(function(data) {
             $scope.rooms = data;
         });
  $scope.showModal = false;
  $scope.toggleModal = function(roomId){
      $scope.showModal = !$scope.showModal;
      $scope.roomId = roomId;
  };
   $scope.load = function() {
        $('img[usemap]').maphilight();
      }
   }]);
  
  
  
  myApp.directive('modal', 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;h1 class="modal-title"&gt;{{ title }}&lt;/h1&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, //Ive tried changing "true" to "$scope"
    link: function postLink(scope, element, attrs) {
      scope.title = attrs.title;
      scope.rooms = scope.$parent.rooms; //doesnt work
      scope.roomId = scope.$parent.roomId; //doesn't work
  
  &lt;!--scope.$watch(attrs.rooms, function(value){
        scope.rooms = value;
      }); --&gt; //tried something like this but doesnt work
  
      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>
  
  <p>and here is the html that uses the directive and needs access to "rooms" and "roomId" from previous scope</p>
  
  <pre><code>&lt;img ng-src="images/housediagram.jpg" alt="Photo of thing" class="map" usemap="#houseMap" data-ng-init="load()"&gt;
  
    &lt;map name="houseMap" id="map"&gt;
      &lt;area ng-repeat="room in rooms" name="{{room.room}}" id="{{room.id}}" shape="poly" 
  coords="{{room.coords}}" ng-click="toggleModal(roomId)"/&gt;
    &lt;/map&gt;
  
   &lt;modal title="{{rooms[roomId].room}}" visible="showModal"&gt; //title doesnt display anything
  &lt;ul&gt;
      &lt;li&gt;
          &lt;h4&gt;Content dependent on data in 'room'&lt;/h4&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/modal&gt;
  </code></pre>
  
  <p>here is a fiddle that doesnt work but it has the code all in one place <a href="http://jsfiddle.net/nateholmes3/kh6vsd1b/2/" rel="nofollow">http://jsfiddle.net/nateholmes3/kh6vsd1b/2/</a> </p>
  
  <p>And to be clear the modal works completely fine, it just needs to access those variables. thanks a ton in advance</p>