title: Injected service undefined
body: <p>I have 2 <code>javascript</code> files, one used as a controller and second as service. When I am injecting service into controller and access it's function, it says </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('currencyConverterModule', []);
  app.factory('currencyConverter', function() {
  
   var localToINR = [
    {USD: 0.015},
    {GBP: 0.011}
   ];
  
   var convertToLocalCurrency = function (amount, localCurrency) {
    return amount * localToINR[localCurrency];
   }
   
   return { convertToLocalCurrency };
  });
  
  var app = angular.module('cartModule', ['currencyConverterModule']);
  app.controller('cartController', ['$scope', 'currencyConverter', function ($scope, currencyConverter){
  
   $scope.SelectedCountry = '0';
   $scope.localCurrency = function(amount, currencyConverter) {
    currencyConverter.convertToLocalCurrency(amount, $scope.SelectedCountry);
   }
  
   $scope.Products = [
    {name: 'TV', price: $scope.localCurrency(30000), quantity: 1},
    {name: 'Fridge', price: $scope.localCurrency(35000), quantity: 1},
    {name: 'AC', price: $scope.localCurrency(40000), quantity: 1}
   ]; 
  
   $scope.Countries = [
    {name: 'India', currency: 'INR', currencySymbol: '&amp;#8377'},
    {name: 'United States', currency: 'USD', currencySymbol: '$'},
    {name: 'England', currency: 'GBP', currencySymbol: '&amp;#163;'}
   ]; 
  
   $scope.getCartValue = function () {
    var total = 0;
    for (var i = 0; i &lt; $scope.Products.length; i++) {
     total = $scope.Products[i].price * $scope.Products[i].quantity;
    }
    return total;
   }
  }]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;body&gt;
   &lt;div ng-app="cartModule" ng-controller="cartController"&gt;
    &lt;table ng-hide="SelectedCountry == '0'"&gt;
     &lt;tr&gt;
      &lt;th&gt;Product&lt;/th&gt;
      &lt;th&gt;Price Per Unit&lt;/th&gt;
      &lt;th&gt; Quantity&lt;/th&gt;
      &lt;th&gt;Total Price&lt;/th&gt;
     &lt;/tr&gt;
     &lt;tr ng-repeat="product in Products"&gt;
      &lt;td ng-bind="product.name"&gt;     
      &lt;/td&gt;
      &lt;td ng-bind="product.price | currency : '&amp;#8377'"&gt;&lt;/td&gt;
      &lt;td&gt;
       &lt;input type="number" ng-model="product.quantity" min="0" max="100"&gt;
      &lt;/td&gt;
      &lt;td ng-bind="product.price * product.quantity | currency : '&amp;#8377'"&gt;&lt;/td&gt;
     &lt;/tr&gt; 
     &lt;tr&gt;
      &lt;th colspan="3"&gt;Total&lt;/th&gt;
      &lt;th ng-bind="getCartValue() | currency : '&amp;#8377'"&gt;&lt;/th&gt;
     &lt;/tr&gt;
    &lt;/table&gt;
  
    &lt;select ng-model="SelectedCountry"&gt;
     &lt;option value="0"&gt;Select your country&lt;/option&gt;
     &lt;option ng-repeat="country in Countries" ng-value="country.name" ng-bind="country.name"&gt;&lt;/option&gt;
    &lt;/select&gt;
   &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'methodName' of undefined</p>
  </blockquote>
  
  <p><strong>Service</strong></p>
  
  <pre><code>var app = angular.module('currencyConverterModule', []);
  app.factory('currencyConverter', function() {
  
      var localToINR = [
          {USD: 0.015},
          {GBP: 0.011}
      ];
  
      var convertToLocalCurrency = function (amount, localCurrency) {
          return amount * localToINR[localCurrency];
      }
  
      return { convertToLocalCurrency };
  });
  </code></pre>
  
  <p>and <strong>Controller</strong></p>
  
  <pre><code>var app = angular.module('cartModule', ['currencyConverterModule']);
  app.controller('cartController', ['currencyConverter', function ($scope, currencyConverter){
  
      $scope.SelectedCountry = '0';
      $scope.localCurrency = function(amount, currencyConverter) {
          currencyConverter.convert(amount, $scope.SelectedCountry); //Error here
      }
  
      $scope.Products = [
          {name: 'TV', price: $scope.localCurrency(30000), quantity: 1},
          {name: 'Fridge', price: $scope.localCurrency(35000), quantity: 1},
          {name: 'AC', price: $scope.localCurrency(40000), quantity: 1}
      ];  
  
      $scope.Countries = [
          {name: 'India', currency: 'INR', currencySymbol: '&amp;#8377'},
          {name: 'United States', currency: 'USD', currencySymbol: '$'},
          {name: 'England', currency: 'GBP', currencySymbol: '&amp;#163;'}
      ];  
  
      $scope.getCartValue = function () {
          var total = 0;
          for (var i = 0; i &lt; $scope.Products.length; i++) {
              total = $scope.Products[i].price * $scope.Products[i].quantity;
          }
          return total;
      }
  }]);
  </code></pre>
  
  <p>I have tried adding both files in different order in view but that couldn't solve the problem. What I am doing wrong here?</p>
  
  <p>I am referencing 3 js files in HTML as below</p>
  
  <pre><code>&lt;script src="../Script/angular.js"&gt;&lt;/script&gt;
  &lt;script src="../Services/currencyConverter.js"&gt;&lt;/script&gt;
  &lt;script src="../Script/cartController.js"&gt;&lt;/script&gt;
  </code></pre>