AngularJS - new directive scope

by mrajcok

HTML

<div ng-controller="MainCtrl">
    testProp: {{model.testProp}}
    <br><br>Input 1, with directive:<br>
    <input type="text" ng-model="model.testProp" dir="123"><br>
    testProp, updated via directive: <span id="out"></span>
    <br><br>Input 2, no directive:<br>
    <input type="text" ng-model="model.testProp"><br>
</div>

JavaScript

function MainCtrl($scope) {
    $scope.model = {
        testProp: "444"
    };
}

angular.module('test', []).directive('dir', function() {
    return {
        // We don't want to instantiate a new controller
        // controller: MainCtrl,
        scope: true,   // creates new scope, which
           // prototypically inherits from the parent scope          
        link: function(scope, element) {
            element.bind("keyup", function(event) {
                document.getElementById("out").innerHTML = scope.model.testProp;
            });
        }
    }
});