How can I filter to a single item in an array bing to it via an angular expression in markup?

Question

I have a single element that I want bound to a single item in an array and ng-repeat doesn't seem applicable.

How can I do something like the following to bind to a single item in an array

<p class="bottomline">{{vehicle.Taglines[0].Tagline | $filter:{MarketId:$scope.MarketId}}</p>

Answer 1

Could you try this:

{{ (vehicle.Taglines | filter: {MarketId: MarketId})[0]["Tagline"] }}

Note, filter not $filter! And you have missed a bracket after the filter object argument!

Answer 2

I don't think it's possible but you can always write that logic in the Controller (and avoid putting so much logic in the template)

module('yourApp', []).controller(['$scope, $filter', function Controller($scope, $filter){
    $scope.$watch('MarketId', function(marketId) {
        $scope.tagLineFound = $filter('filter')($scope.vehicle.Taglines, marketId)[0];
    });
}]);

HTML

<p class="bottomline">{{tagLineFound.Tagline}}</p>