Angular JS Mall

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app="example">
    <div ng-controller="TodoCtrl">
        <div ng-repeat="car in carsOwned track by $index">
             <h3>Owned car: {{car.brand}}</h3>

            <div example-select car="car">
                <select ng-model="carsOwned[$index]" ng-options="carType.brand for carType in carTypes"></select>
            </div>
        </div>
    </div>

JavaScript

var app = angular.module('example', []);
app.controller('TodoCtrl', function($scope) {
    $scope.carTypes = [{
        brand: 'BMW',
        value: 'bmw'
    }, {
        brand: 'Mercedes',
        value: 'me'
    }, {
        brand: 'Fiat',
        value: 'fi'
    }];

    $scope.carsOwned = [
        $scope.carTypes[0], $scope.carTypes[1]
    ];
});

app.directive('exampleSelect', function () {
    return {
        transclude: true,
        scope: {
            car: '='
        },
        link: function (scope, elm, attrs, ctrl) {
            console.log('alive', scope.car);
        },
        template: '<div><div ng-transclude></div></div>'
    };
});