AngularJS Template

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
 <body ng-controller="productsCtrl">
   <ul id="products">
     <li ng-repeat="entry in entries">
       <a ng-click="processProductLink(entry)">{{entry.title}}</a>
     </li>
   </ul>
   <div style="margin-top:40px;font-size:18pt;background-color:#bbb;">
     Using title if it is unique: {{selectedValue}}
     <hr>
     Found entry using title:<br>
     {{ foundEntry }}
   </div>
   <div style="margin-top:40px;font-size:18pt;background-color:#ddd;">
     Using query params to pass all values: <br>{{selectedParams}}
   </div>
 </body>

JavaScript

function productsCtrl($scope) {

// use clicked link entry to build url for product details page
$scope.processProductLink = function(entry) {
// if title is unique you can use it as an identifier
    $scope.selectedValue = encodeURI(entry.title);
    // if each entry is small you can pass all values as querystring paramters
    $scope.selectedParams = encodeURI("?title=" + entry.title + "&category=" + entry.category + "&price=" + entry.price);

// using the title we can find the first entry that matches and now we have our product info
    $scope.foundEntry = $scope.entries.find(
    function(listEntry) {
      return listEntry.title === decodeURI($scope.selectedValue);
    });
  }

  $scope.entries = [{
      title: "Laptop",
      category: "Category01",
      price: 233
    },
    {
      title: "Phone",
      category: "Category02",
      price: 122
    },
    {
      title: "Mouse",
      category: "Category03",
      price: 10
    },
    {
      title: "title with spaces",
      category: "Category03",
      price: 10
    }
  ];
}

angular.module('app', [])
  .controller('productsCtrl', productsCtrl);

angular.bootstrap(document.body, ['app']);