title: Angular - Use scope Variable in Service url
body: <p>Currently I'd like to get data from an API, sending some search parameters using an AngularJS service. In my ng-model I have a variable called search, and I would like to use that variable as a parameter to the API URL.</p>
  
  <p>My first (unsuccessful) approach was to use the $scope.search variable directly inside the service: </p>
  
  <pre class="lang-js prettyprint-override"><code>$http.get('http://www.omdbapi.com/?s='+ $scope.search +'&amp;type=series&amp;r=json').then(function(data){
       deferred.resolve(data);
  });
  </code></pre>
  
  <p>I've <a href="https://stackoverflow.com/questions/19747830/how-do-i-pass-scope-from-controller-to-service-in-angularjs">read</a> that passing the $scope to the service is not possible (and shouldn't be done anyway), so how can I use the scope variable as a parameter in the service, also, is there a cleaner way to set the paramaters other than adding the string <code>myUrl + search</code>? </p>
  
  <p>full code:</p>
  
  <pre class="lang-js prettyprint-override"><code> myApp.service('showsService', function($http, $q){
      var deferred = $q.defer(); //promise to say 'im going to do this later'
      $http.get('http://www.omdbapi.com/?s=sherlock&amp;type=series&amp;r=json').then(function(data){
          deferred.resolve(data);
      });
      this.getShows = function(){
          return deferred.promise;
      }
      });
  
      myApp.controller("showsController", function($scope, showsService){
      $scope.$watch('search', function() {
        fetch();
      });
  
      function fetch(){
          var promise = showsService.getShows();
          promise.then(function(data){
          $scope.showsResult = data.data.Search; //using the name than comes back from the API
      });
      }
      });
  </code></pre>