Directive Controller

We can add controllers to our Custom Directives

Example

Suppose we want to convert this

​<section ng-controller="PanelController as panels">
    <ul class="nav nav-pills">...</ul>
    <div class="panel" ng-show="panels.isSelected(1)">...</div>
    <div class="panel" ng-show="panels.isSelected(2)">...</div>
    <div class="panel" ng-show="panels.isSelected(3)">...</div>
    <div class="panel" ng-show="panels.isSelected(4)">...</div>
</section>

to this

<product-panels></product-panels>

Within the apps.js

app.directive("productPanels", function(){
    return {
        restrict : 'E',
        templateUrl : 'product-panels.html', 
        controller : function(){
         ...
        },
        controllerAs : 'panels'
    };
});

​within the product-panels.html

    <ul class="nav nav-pills">...</ul>
    <div class="panel" ng-show="panels.isSelected(1)">...</div>
    <div class="panel" ng-show="panels.isSelected(2)">...</div>
    <div class="panel" ng-show="panels.isSelected(3)">...</div>
    <div class="panel" ng-show="panels.isSelected(4)">...</div>