title: How can I create an angularjs directive that makes a ajax request?
body: <p>I would like to achieve the following result:</p>
  
  <pre><code>&lt;users name="allUsers" get-all&gt;&lt;/users&gt;
  </code></pre>
  
  <p>And then, render a select element with a list of all users. This is what I did until now:</p>
  
  <pre><code>var app = angular.module("Security", []);
  
  app.directive("users", function() {
      return {
          restrict: 'E'
      };
  });
  
  app.directive("getAll", function() {
      return {
          restrict: 'A'
      };
  });
  </code></pre>
  
  <p>After lots of googling, I found nothing related. Probably I am searching for rats instead of dogs...</p>
  
  <p>EDIT:
  OK, now I have a service, but still don't know how to connect using scope. </p>
  
  <pre><code>app.factory('userService', function ($http) {
      return {
          getAll: function () {
              return $http.get('/users/getAll')
                          .then(function (result) {
                              return result.data;
                              // [{Id: 1, Name: 'John'}, {Id: 2, Name: 'Mark'}]
                          });
          }
      }
  });
  
  app.directive("getAll", function() {
      return {
          restrict: 'A',
          require: '^users',
          template: '&lt;option value="{{Id}}"&gt;{{Name}}&lt;/option&gt;',
          link: function (scope, element, attrs, userCtrl) {
              userService.getAll()
                         .then(function (result) {
                             // What should I do?
                         });
          }
      };
  });
  </code></pre>