Angular JS Mall

by marcolepsy

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">
             <h3>Owned car: {{car.value.brand}}</h3>

            <div example-select>
                <select ng-model="car.value" ng-options="carType.brand for carType in carTypes" ng-init="car.value=carTypes[0]"></select>
            </div>
        </div>
    </div>

JavaScript

function TodoCtrl($scope) {

    $scope.carTypes = [{
        brand: 'BMW',
        value: 'bmw'
    }, {
        brand: 'Mercedes',
        value: 'me'
    }, {
        brand: 'Fiat',
        value: 'fi'
    }];

    $scope.carsOwned = [$scope.carTypes[0]];

}

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