title: AngularJS: Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- productService
body: <p>I have created a <em>Service</em> to pull data from database using Web API controller method. But whenever I inject the service and call the service method in controller, it shows the following error:</p>
  
  <blockquote>
    <p>Error: [$injector:unpr] Unknown provider: $scopeProvider &lt;- $scope &lt;- productService
    <a href="http://errors.angularjs.org/1.5.8/" rel="noreferrer">http://errors.angularjs.org/1.5.8/</a>$injector/unpr?p0=copeProvider%20%3C-%20%24scope%20%3C-%20productService</p>
  </blockquote>
  
  <p>Tried a lot but cannot understand where the wrong actually lies!</p>
  
  <p><strong>Here is My AngularJS Module Code:</strong></p>
  
  <pre><code>var app = angular.module("Demo", ["ngRoute"])
  </code></pre>
  
  <p><strong>Here is my RouteConfig</strong></p>
  
  <pre><code>app.config(function($routeProvider, $locationProvider) {
      $routeProvider.when("/products/details/:id",
          {
              templateUrl: "Temaplates/details.html",
              controller: "productDetailsController"
          })
   })
  </code></pre>
  
  <p><strong>Here is My Service:</strong></p>
  
  <pre><code>app.factory('productService',
      function($scope, $http, $routeParams) {
          return {
              getDataById: function() {
                  alert("Hello I am invoked");
                  $http({
                          method: "GET",
                          url: "http://localhost:43618/api/Products",
                          params: { id: $routeParams.id }
                      })
                      .then(function(response) {
                          $scope.product = response.data;
                      })
              }
          };
      });
  </code></pre>
  
  <p><strong>Here is my AngularJS Controller</strong></p>
  
  <pre><code>app.controller("productDetailsController", function ($scope, $http, $routeParams, $location, productService) {
       $scope.message = "Product Details";
       $scope.product = productService.getDataById();
  
      })
  </code></pre>
  
  <p><strong>Where is the wrong actually!! Any Help Please!!</strong></p>