javascript - ngModel don't upate deep level -

when have ngmodel more 1 level , modify value programmatically in scope, value not updated in ui. if put $watch on same property, works. how can fix ngmodel

html:

<form ng-controller="testcontroller">     <input type="text" ng-model="coco.c.c.c">     <input type="test" ng-model="super.s.s.s">     <input type="test" ng-model="super2"> </form> 

js:

var app = angular.module('app', []);  app.controller('testcontroller', function ($scope) {     $scope.super = {         s: {             s: {              }         }     };      $scope.coco = {         c: {             c: {              }         }     };      $scope.$watch('coco.c.c.c', function (value) {         $scope.super = +value * 2;         console.log(value);      });     $scope.$watch('super.s.s.s', function (value) {         $scope.super2 = +value * 2;     }); }); app.controller('testcontroller2', function ($scope) {     $scope.$watch('coco', function (value) {         $scope.super = +value * 2;         console.log(value);     });     $scope.$watch('super', function (value) {         $scope.super2 = +value * 2;     }); }); 

angular.bootstrap(document, [app.name]);

http://jsfiddle.net/m5wzt/2/

i think problem line

  $scope.super = +value * 2; 

here changing $scope.super is. can no more use $scope.super.s.s.s

i have not understood want accomplish, though. maybe this?

<form ng-controller="testcontroller">    <input type="text" ng-model="coco.c.c.c" />    <input type="text" ng-model="super.s.s.s" />    <input type="text" ng-model="super2" /> </form>  app.controller('testcontroller', function ($scope) {     $scope.super = {s:{ s:{ }}}      $scope.coco = {         c: {             c: {              }         }     };      $scope.$watch('coco.c.c.c', function (value) {         $scope.super.s.s.s = +value * 2;         console.log("coco", value);      });     $scope.$watch('super.s.s.s', function (value) {        $scope.super2 = +value * 2;         console.log("super", value);     }); });