AngularJS: After filter, detail screen still shows non-filtered index for Route Parameter

Issue

On AngularJS, I have a filter for a SKU and a Name. Those work great in filtering the correct information. However, when I want to load the information in the detail screen using routing to show more, it still loads the index 0, even though I'm selecting a different option. I'm not quite sure what's missing to get this to show the correct detail page. Here is the HTML:

<input ng-model="search.name" placeholder="Enter search term here...">
<input ng-model="search.upc" placeholder="Enter SKU here...">

<li ng-repeat="product in productsArray | filter:search | filter:upc">
<a href="#/detail/{{$index}}"><button class="productListItem">{{product.name}}</button></a></li>

-------------------------` Here is the JavaScript: angular.module("ingredientProducts", ['ngRoute'])

.config(function($routeProvider){

    $routeProvider.when('/main',{
        templateUrl: "main.html",
        controller : "mainController"
    }).when('/detail/:productID',{
        templateUrl: "details.html",
        controller : "detailsController"
    }).otherwise({
        redirectTo : "/main"
    });
})
.controller("mainController", function($scope, dataService){
    var productsArray = [];

    $scope.productsArray = dataService.getProducts();
})
.controller("detailsController", function($scope, $routeParams, dataService){

    $scope.product= dataService.getProductAt($routeParams.productID);

});

---

angular.module("ingredientProducts").service("dataService", function(){
    var productsArray = [
        {name: "Glass Container",
            upc: "2000000000",
            description: "This is a glass container",
            ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            allergy: "This product may contain soy, gluten, and dairy.",
            img: "glass.jpg",
        }];

    this.getProducts = function(){
        return productsArray;
    };
    this.getProductAt = function(product){
        this.getProducts();
        return productsArray[product];
    }; 
});

Thank you for your help!

Solution

You can't rely on $index becouse when you filter your array index of product will be not equal to product index in your service.

Please see here for solution http://plnkr.co/edit/xFMkHxwDwkJfcqwnbHg8?p=preview

Main View:

<li ng-repeat="product in productsArray | filter:search | filter:upc">
<a href="#/detail/{{product.upc}}"><button class="productListItem">{{product.name}}</button></a></li>

Data Service:

angular.module("plunker").service("dataService", function(filterFilter) {
  var productsArray = [{
    name: "Glass Container",
    upc: "2000000000",
    description: "This is a glass container",
    ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    allergy: "This product may contain soy, gluten, and dairy.",
    img: "glass.jpg",
  },
  {
    name: "Jar",
    upc: "2000000001",
    description: "This is a glass container",
    ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    allergy: "This product may contain soy, gluten, and dairy.",
    img: "glass.jpg",
  },
  {
    name: "Tent",
    upc: "2000000002",
    description: "This is a glass container",
    ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    allergy: "This product may contain soy, gluten, and dairy.",
    img: "glass.jpg",
  },
  {
    name: "Bootle",
    upc: "2000000003",
    description: "This is a glass container",
    ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    allergy: "This product may contain soy, gluten, and dairy.",
    img: "glass.jpg",
  }];

  this.getProducts = function() {
    return productsArray;
  };
  this.getProductAt = function(_upc) {
    this.getProducts();
    return  filterFilter(productsArray, {upc:_upc})[0];
  };
});

Answered By - sylwester