Angular: Empty Fiddle

http://angularjs.org/

by johnlindquist

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc8.js"></script>
<div>
    <my-component id="foo">
        <input ng-model="message" ng-change="foo.apiFunc(message)">
        <div>Works as expected: {{foo.bar}}</div>
    </my-component>
</div>
<hr>
<div>The clash below breaks all bindings: {{foo.bar}}</div>
<input ng-model="foo">

JavaScript

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

myApp.directive('myComponent', function () {
    return {
        restrict:'E',
        controller:function ($scope, $attrs) {

            var ctrl = this;
            ctrl.apiFunc = function (message) {
                ctrl.bar = message;
            };
            $scope[$attrs.id] = ctrl;
        }
    }
});