title: Sharing scope between Directives - missing $http
body: <p>Here are mine two directives. I basically want to share the scope between them. However with this I get an undefined <code>$http</code> error. I know I need to put <code>$http</code> somewhere, but where?</p>
  
  <pre><code>aresAnalytics.directive('market', function($http) {
      return {
          restrict: 'E',
          controller: function ($scope, Data) {
              $scope.data = Data;
          },
  
          link: function(scope, element, attrs) {
              element.bind('click', function() {
  
                  console.log("A1 " + attrs.market);
  
                  scope.temp = attrs.market;
  
                  $http.get('get_markets').success(function(markets) {
                      Data.markets =  markets;
                  });
  
              })
          }
      }
  });
  
  aresAnalytics.directive('events', function($http) {
     return {
         restrict: 'E',
  
         controller: function ($scope) {
             scope = $scope;
         },
  
  
         link: function(scope, element) {
  
             element.bind('click', function() {
                 console.log(scope.temp);
             });
  
         }
     }
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;market ng-repeat="market in data.markets" market="{{ market }}"&gt;
          {{ market }}
      &lt;/market&gt;
  </code></pre>
  
  <p>Also, I think the way I am doing this</p>
  
  <pre><code> $http.get('get_markets').success(function(markets) {
          Data.markets =  markets;
  });
  </code></pre>
  
  <p>is not correct, what can I replace with it.</p>
  
  <p>And, should I use Isolate Scope '@' instead? How will that look like?</p>
  
  <p>Thanks for reading this!</p>