AngularJS Extend / Copy / Other

HTML

<div ng-app="App" ng-controller="Ctrl">
    <label>foo
        <input ng-model="master.foo" />
    </label>
    <label>bar
        <input ng-model="master.bar" />
    </label>
    <br/>
    <br/>
    <label>master</label><pre>{{ master | json }}</pre>

    <label>copy</label><pre>{{ copy | json }}</pre>

    <label>extend</label><pre>{{ extend | json }}</pre>
 <strong>copyNotValues</strong><pre>{{ copyNotValues | json }}</pre>

</div>

CSS

</style> <!-- Ugly Hack to make remote files preload in jsFiddle --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script> <script type="text/javascript" src="protractorTest.js"></script> <style>

JavaScript

angular.module('App', []);

function Ctrl($scope) {

    function copyNotValues(obj) {
        var newObj = angular.copy(obj);
        for (prop in newObj) {
            if(newObj.hasOwnProperty(prop))
            {
                newObj[prop] = null;
            }
        };
        return newObj;
    }

    $scope.master = {
        foo: 'original foo',
        bar: 'original bar'
    };

    $scope.copy = angular.copy($scope.master);
    $scope.copy.foo = 'original poo';
    $scope.extend = angular.extend({},$scope.master,$scope.copy);

    $scope.copyNotValues = copyNotValues($scope.master);

}