title: Selecting a single object from an array to display in a view [Angular]
body: <p>I've similarly asked this before, but neither solution proved useful. </p>
  
  <p>I currently have a store app built with AngularJS, my problem is, I need to be able to click on one item and open into the "item" view and display only the information with a matching ID from the items array stored in a services. </p>
  
  <p>For example. Item one displayed on store view has an id of 1, and on the store displays the product name etc. When clicked, the item is opened with the item view to display just that product and it's information. </p>
  
  <p>Here's my store Controller: </p>
  
  <pre><code>'use strict';
  angular.module('angularStoreApp')
    .controller('storeCtrl', function($scope, StoreService){
      $scope.items = StoreService.items();
    });
  </code></pre>
  
  <p>Services (Shortened to save spare, there's 12 other items). </p>
  
  <pre><code>'use strict';
  
  angular.module('angularStoreApp')
    .service("StoreService", function() {
      var items = [ {
        itemId: 1,
        qty: 0,
        stock: 5,
        price: 99.00,
        name: 'Almond Toe Court Shoes, Patent Black',
        category: 'Womens Footerwear'
      },
        {
          qty: 0,
          stock: 4,
          price: 42.00,
          name: 'Suede Shoes, Blue',
          category: 'Womens Footerwear'
        }];
      this.items = function() {
        return items;
      };
    });
  </code></pre>
  
  <p>Store View </p>
  
  <pre><code>&lt;!-- Start of item iteration --&gt;
    &lt;div ng-repeat="item in items"&gt;
      &lt;!-- Start of item --&gt;
        &lt;div class="item"&gt;
          &lt;div class="item_info"&gt;
            &lt;img src="http://i.imgur.com/Bn1iB6X.jpg"/&gt;
            &lt;div class="item_footer"&gt;
              &lt;div class="info_text"&gt;
                &lt;h2&gt;{{item.name| limitTo: 8}}...&lt;/h2&gt;
                &lt;span&gt;{{item.price | currency}}&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="icon"&gt;
                &lt;a ng-href="#"&gt;&lt;button role="button"&gt;More&lt;/button&gt;&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;!-- End of item --&gt;
    &lt;/div&gt;
  &lt;!-- End of item iteration--&gt;
  </code></pre>
  
  <p>Item Ctrl</p>
  
  <pre><code>'use strict';
  
  angular.module('angularStoreApp')
    .controller('itemCtrl', function ($scope, StoreService) {
  
      $scope.items = StoreService.items();
    });
  </code></pre>
  
  <p>Item View</p>
  
  <pre><code>&lt;div ng-include="'components/navbar/navbar.html'"&gt;&lt;/div&gt;
  
  &lt;div ng-repreat="item in items"&gt;
  &lt;div class="item-page-container"&gt;
    &lt;div class="item-p-img"&gt;
      {{item.name}}
  
    &lt;/div&gt;
    &lt;div class="item-p-tab-Container"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;{{item.name}}&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please ask for any more code or for easier view, see my <a href="https://github.com/BillyPurvis/angular-store-app" rel="nofollow">Github Repo</a></p>
  
  <p>Please be clear on the function, feel free to put into a plunker, my Javascript skills come from Angular, but searching an array like this I haven't done before. I'd need a good solution where I can transfer/learn the logic. </p>