title: Angular Service - Pass $http data to scope
body: <p>I´m trying to create an angular function inside on Service to return acess data via $http and then return to a desired scope.</p>
  
  <p>So my service it something like this;</p>
  
  <pre><code>app.service('agrService', function ($http) {
  
      this.testinho = function(){
          return "teste";
      }
  
      this.bannerSlides = function(){
  
          var dataUrl = "data/banner-rotator.json";
  
          // Simple GET request example :
          $http({
              method: 'GET',
              dataType: "json",
              url: dataUrl
          })
          .success( function(data, status, headers, config) {
  
              // this callback will be called asynchronously
              // when the response is available
  
              //console.log(data);
              return data;
  
          }).error( function(data, status, headers, config) {
  
              // called asynchronously if an error occurs
              // or server returns response with an error status.
              alert("Niente, Nada, Caput");
          });
  
      }
  
  })
  </code></pre>
  
  <p>Then i want to associate the returned data to a scope inside of my main App controller... like this:</p>
  
  <pre><code>app.controller('AppCtrl', function($scope, $http, agrService) {
      $scope.slides = agrService.bannerSlides();
  })
  </code></pre>
  
  <p>Then in my template i want to loop the data like this:</p>
  
  <pre><code>&lt;div ng-repeat="slide in slides"&gt;
      &lt;div class="box" style="background: url('{{ slide.url }}') no-repeat center;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is that the data it´s only available on success and i don´t know how to pass it to my scope slides!!!!! </p>
  
  <p>What i´m doing wrong?</p>
  
  <p>Many thanks in advance</p>