AngularJS - How to render a partial with variables? -

for example, have partial in car-list.html, , want render in several places different collections of cars. maybe this:

<h1>all new cars</h1> <div ng-include="car-list.html" ng-data-cars="allcars | onlynew"></div>  <h1>all toyotas</h1> <div ng-include="car-list.html" ng-data-cars="allcars | make:toyota"></div> 

the main difference normal include partial doesn't need know list of cars it's displaying. it's given array of cars, , displays them. possibly like:

<!-- car-list.html --> <div ng-repeat="car in cars" ng-controller="carlistcontrol">     {{car.year}} {{car.make}} {{car.model}} </div> 

you can achieve directive.

something that:

angular.module('mymodule') .directive('cars', function () {   return {     restrict: 'e',     scope: { 'cars': '=data' },     template: "<div ng-repeat='car in cars'>\n" +     "  {{car.year}} {{car.make}} {{car.model}}\n" +     "</div>"   }; }); 

then can use that:

<h1>all new cars</h1> <cars data="allcars | onlynew"></cars>  <h1>all toyotas</h1> <cars data="allcars | make:toyota"></cars> 

you can find more info directives here.