title: In Angular, how to pass JSON object/array into directive?
body: <p>Currently, my app has a controller that takes in a JSON file then iterates through them using "ng-repeat". This is all working great, but I also have a directive that needs to iterate through the same JSON file. This is posing a problem as I cannot request the same JSON file twice on one page (nor would I want to because it would be inefficient). Both the directive and controller request and iterate through the JSON data just fine if I change the filename of one of the JSON files.</p>
  
  <p>What I'm wondering is: what's the best way to go about passing the array formed from my controller's JSON request into the directive? How can I pass the array into my directive and iterate through when I've already accessed it via my controller?</p>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>appControllers.controller('dummyCtrl', function ($scope, $http) {
     $http.get('locations/locations.json').success(function(data) {
        $scope.locations = data;
     });
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul class="list"&gt;
     &lt;li ng-repeat="location in locations"&gt;
        &lt;a href="#"&gt;{{location.id}}. {{location.name}}&lt;/a&gt;
     &lt;/li&gt;
  &lt;/ul&gt;
  &lt;map&gt;&lt;/map&gt; //executes a js library
  </code></pre>
  
  <p><strong>Directive (Works when I use a file name besides locations.json, since I've already requested it once</strong></p>
  
  <pre><code>.directive('map', function($http) {
     return {
       restrict: 'E',
       replace: true,
       template: '&lt;div&gt;&lt;/div&gt;',
       link: function(scope, element, attrs) {
  
  $http.get('locations/locations.json').success(function(data) {
     angular.forEach(data.locations, function(location, key){
       //do something
     });
  });
  </code></pre>