title: API call on click of link in angular JS
body: <p>I am trying to call an api on click of a link and show the data in a new view , but i am not seeing any data neither an error on console.I tried using Log also but thats also not giving me any clue.
  Here is my code in View:
          </p>
  
  <pre><code>        &lt;tr class="well-new" ng-repeat="product in gettempdata.FoodItems| orderBy:'Id' | filter:search""&gt;
              &lt;td class="tdCenter" &gt;
                 {{product.Id}}
              &lt;/td&gt;
              &lt;td class="tdCenter"&gt;
                  &lt;img ng-src="{{product.ImageUrl}}" alt="{{product.Name}}" /&gt;
  
              &lt;/td&gt;
  
              &lt;td&gt;
                  &lt;a href="#Name" ng-click="GetItemDetails(product.Id)"&gt;&lt;b&gt;{{product.Name}}&lt;/b&gt;&lt;/a&gt;&lt;br /&gt;
                  {{product.Category}}
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;  
  </code></pre>
  
  <p>I am trying to call GetItemDetails(Id).
  Controller code:</p>
  
  <pre><code>     myStore.controller("Home", function ($scope, StoreService, $log, $window) {
   var onComplete = function (data) {
          $scope.gettempdata = data;
      }
      var onError = function (reason) {
          alert(reason.errorcode);
      }
  $scope.GetItemDetails = function (Id) {
          $log.info("wait for 5 secs");
          StoreService.getItemDetails(Id).then(onComplete, onError);
          $log.info("done");
      }
  });
  </code></pre>
  
  <p>App.js code:</p>
  
  <pre><code>var myStore = angular.module('groceries', ['ngRoute'])
  .config(function ($routeProvider) {
      $routeProvider.
          when("/Home", {
              templateUrl: "/Index.html",
              controller: "Home"
          }).
  
          when("/Name", {
              templateUrl: "Store/Product.html",
              controller: "Home"
          }).
  
      otherwise
      ({
          redirectTo: "/Home"
      })
  
  });
  </code></pre>
  
  <p>The Home view:</p>
  
  <pre><code>&lt;html ng-app="groceries"&gt;
  &lt;head&gt;
  &lt;script&gt; ALL scripts&lt;/scripts&gt;
   &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;!-- 
          bootstrap fluid layout
          (12 columns: span 10, offset 1 centers the content and adds a margin on each side)
      --&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="row-fluid"&gt;
              &lt;div class="span10 offset1"&gt;
                  &lt;h1 class="well"&gt;
  
                      &lt;b&gt;Store &lt;/b&gt;
                  &lt;/h1&gt;
                  &lt;!-- &lt;a href="#Index.html"&gt;Click here to navigate to Store&lt;/a&gt;--&gt;
                  &lt;div ng-view &gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>