AngularJS-Directives-Scope-Default

To demonstrate how default scope works in AngularJS directive

by madhanganesh

HTML

<div ng-app="myApp" ng-controller="MyController">
    <h1>HTML View - scope</h1>
    <strong>Name: </strong>
    <input ng-model="name" />
    <hr/>
    <h2>Directive</h2>
    <div upper-case/></div>
</div>

JavaScript

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

myApp.controller('MyController', function($scope) {
    $scope.name = 'Jack';
});

myApp.directive('upperCase', function() {
    return {
        restrict: 'A',
        scope: false, // false is default value if no scope is sepcfied 
        template: 'Name: <input ng-model="name"></input>'
    }
});