AngularJS with Backbone Example

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<div ng-app>
     <h2>Person</h2>

    <div ng-controller="PersonCtrl">
        <p>{{ person.name }}</p>
        <input ng-model="person.name">
        <button ng-click="alertName()">alert name</button>
        <button ng-click="setName()">set name to 'bar'</button>
    </div>
</div>

JavaScript

function PersonCtrl($scope) {

    Backbone.ngModel = Backbone.Model.extend({
        initialize: function (opt) {
            _.each(opt, function (value, key) {
                Object.defineProperty(this, key, {
                    get: function () {
                        return this.get(key)
                    },
                    set: function (value) {
                        this.set(key, value);
                    },
                    enumerable: true,
                    configurable: true
                });
            }, this);
        }
    });

    var person = new Backbone.ngModel({
        name: 'foo'
    });

    $scope.person = person;

    $scope.setName = function () {
        person.set('name', 'bar');
    }
    
    $scope.alertName = function () {
        var alertMessage = person.get('name', 'bar');
        alertMessage += '\n' + person.attributes.name;
        alertMessage += '\n' + person.name;
        alert(alertMessage);
    }
}