Angular playground

by Sean Cannon

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.0/css/foundation.css">
<div>
    <div ng-controller="FirstCtrl as first">
        <p class="panel">{{first.user.name}}</p>
        <input ng-model="first.user.name"/>
        <p class="panel">{{first.user.name}}</p>
        <div foo-bar></div>
    </div>
</div>

JavaScript

var app = angular.module('myApp',[]);

app.controller('FirstCtrl', ['User', function (User) {
    this.user = User;
    
    return this;
}]);

app.service('User', [function () {
    this.name = 'John';
    this.email = '[email protected]';
    
    return this;
}]);
        
app.filter('reverse', function () {
    return function (text) {
        return text.split('').reverse().join('');
    };
});

app.directive('fooBar', ['User', function (User) {
    return {
        restrict : 'A',
        replace  : false,
        template : '<p class="panel">{{first.user.name | reverse}}</p>',
        scope    : '',
        link     : function (scope, elem, attrs) {
        }
    };
}]);