title: AngularJS - Multiple Directive Instances making XHR call multiple times
body: <p>I have an Angularjs directive 'ExampleDirective' which has the controller 'ExampleController'. The controller defines two Promise objects where each Promise object makes an Http GET request and returns the response.</p>
  
  <p>In the directive, we get the response data from the promise objects and process them to render the directive. </p>
  
  <p>ExampleDirective gets instantiated twice within the same view and each instance makes it's own Http GET requests. This causes performance issues on the front end due to two requests sent at the same time to make expensive database calls and read from the same table as well. </p>
  
  <p>Controller:</p>
  
  <pre><code>angular.module('exampleModule')
    .constant("EXAMPLE_URL", "{% url 'example:get_example' %}")
    .controller('exampleCtrl', ['$scope', '$http', 'EXAMPLE_URL', exampleCtrl]);
  
  function exampleCtrl($scope, $http, EXAMPLE_URL) {
    $scope.examplePromise = $http.get(EXAMPLE_URL).then(function(response) {
      return response.data;
    });
  }
  </code></pre>
  
  <p>Directive:</p>
  
  <pre><code>angular.module('exampleModule')
  .directive('exampleDirective', ['exampleFactory', 'STATIC_URL',      '$http', '$window', exampleDirective]);
  
  function exampleDirective(exampleFactory, STATIC_URL, $http, $window) {
    return {
      scope: {
        title:'@?',
        loadingImage:'@?',
      },
      restrict: 'AE',
      templateUrl: STATIC_URL + 'example/example-template.html',
      controller: "exampleCtrl",
  
      link: function (scope, element, attrs) {
  
       //add default options:
      if (!scope.title) {
        scope.title = 'Example Title';
      }
      if (!scope.loadingImage) {
        scope.loadingImage = '';
      }
  
      scope.examplePromise.then(function(data) {
        scope.exampleData = data;
        // do something
      });
    }
   };
  }
  </code></pre>
  
  <p>Is there a way to instantiate a directive multiple times but not have to make the Http GET requests in the controller twice?</p>
  
  <p><strong>UPDATE</strong>
  This is what I did, I added a service as suggested in the answer.</p>
  
  <p>Service:</p>
  
  <pre><code>angular.module('chRatingsModule')
  .factory('chExampleFactory', ['$http', 'EXAMPLE_URL', chExampleFactory]);
  
  function chExampleFactory($http, EXAMPLE_URL) {
    var api = {}
    var promise = null;
    api.examplePromise = examplePromise; 
  
    function examplePromise() {
      if (promise == null) {
        promise = $http.get(EXAMPLE_URL).then(function(response) {
          return response.data;
        });
      }
      return promise;
    }
  
    return api;
  }
  </code></pre>
  
  <p>Updated Directive:</p>
  
  <pre><code>angular.module('exampleModule')
  .directive('exampleDirective', ['exampleFactory', 'STATIC_URL',      '$http', '$window', exampleDirective]);
  
  function exampleDirective(exampleFactory, STATIC_URL, $http, $window) {
    return {
      scope: {
        title:'@?',
        loadingImage:'@?',
      },
      restrict: 'AE',
      templateUrl: STATIC_URL + 'example/example-template.html',
  
      link: function (scope, element, attrs) {
  
      exampleFactory.examplePromise.then(function(data) {
        scope.exampleData = data;
        // do something
      });
    }
   };
  }
  </code></pre>