Angular: Empty Fiddle

http://angularjs.org/

by KevinIsNowOnline

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">Hello, {{name}}!
    <div>You live at {{address}}</div>
    <button ng-click="setName()">Change Name with $watch</button>
    <button ng-click="setAddress()">Change Address</button>
</div>

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.controller("MyCtrl", function ($scope, MyServiceThatNeedsWatch, MyService) {
    $scope.name = MyServiceThatNeedsWatch.getName();
    $scope.address = MyService.getAddress();
    $scope.setName = function () {

        MyServiceThatNeedsWatch.setName("ash");
    }

    $scope.setAddress = function () {
        MyService.setAddress("Pluto");
    }

    $scope.$watch(

    function () {
        return MyServiceThatNeedsWatch.name
    },

    function (newVal) {
        $scope.name = newVal;
    })
});


myApp.service("MyServiceThatNeedsWatch", function () {
    this.name = "kevin";

    this.getName = function () {
        return this.name;
    }

    this.setName = function (newName) {
        this.name = newName;
    };
});

myApp.service("MyService", function () {
    var address = {
        street: "Los Angeles"
    };


    this.getAddress = function () {
        return address;
    }
    this.setAddress = function (newName) {
        address.street = newName;
    }
});