Angular: Empty Fiddle

http://angularjs.org/

by user1572526

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="https://rawgithub.com/angular-ui/bootstrap/master/src/dropdownToggle/dropdownToggle.js"></script>
<div ng-controller="MyCtrl">
    Select category: <my-directive my-options="categories" my-selected-option="selectedCategory" set-my-selected-option="setCategory"></my-directive>
</div>

JavaScript

var myApp = angular.module('myApp', ['ui.bootstrap.dropdownToggle']);

myApp.directive('myDirective', function () {
    return {
        restrict: 'E',
        scope: {
            options: '=myOptions',
            selectedOption: "=mySelectedOption",
            setOption:"=setMySelectedOption"
        },
        template: '<li class="dropdown">' +
            '<a class="dropdown-toggle">' +
            '{{selectedOption.title}}' +
            '</a>' +
            '<ul class="dropdown-menu">' +
            '<li ng-repeat="option in options">' +
            '<a ng-click=setOption(option)>{{option.title}}</a>' +
            '</li>' +
            '</ul>' +
            '</li>'
    }
});

//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.categories = [{
        id: 1,
        title: "Keyboards"
    }, {
        id: 2,
        title: "Monitors"
    }, {
        id: 3,
        title: "Laptops"
    }];
    $scope.selectedCategory = $scope.categories[0];
    
    $scope.setCategory = function(category){
        console.log(category);
        $scope.selectedCategory = category;   
    }    
}