Chapter 9: Controlling model inputs with ngModelOptions

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="Ctrl">
        <form name="playerForm">
            Name:
            <input type="text"
                   name="playerName"
                   ng-model="player.name"
                   ng-model-options="{ getterSetter: true }" />
        </form>
        <button ng-click="player.name('')">Reset Name</button>
        {{ player.name() }}
    </div>
</div>

JavaScript

angular.module('myApp', [])
.controller('Ctrl', function($scope) {
    // private player name
    var playerName = 'Jordan Wilson';
    
    // public getter/setter
    $scope.player = {
        name: function (newName) {
            console.log(newName)
            if (angular.isUndefined(newName)) {
                // getter
                return playerName;
            } else {
                // setter
                playerName = newName;
            };
        }
    };
});