AngularJS: use $scope.$watch with controller as syntax

Question

I have a plnkr here that I am testing $scope.$watch on radio buttons with the controller as syntax. In addition, the radio buttons are embedded inside a parent view container.

In the 'About us' page, I have the following html code for showing two radio buttons along with the current selection message:

<div class="row-fluid">
  <div class="well">
    <p><strong>Make a selection:</strong></p>
    <label>Yes</label>
    <input type="radio" name="selection" ng-model="aboutView.radioSelection" value="Yes">

    <label>No</label>
    <input type="radio" name="selection" ng-model="aboutView.radioSelection" value="No">

  <p>{{aboutView.message}}</p>
  </div>

I have the following code in the aboutController.js:

(function() {
  'use strict';

  angular.module('layoutApp')
  .controller('aboutController', aboutController);

  aboutController.$inject = ['$scope'];

  function aboutController($scope) {

    var vm = this;
    vm.radioSelection = "No";  //default selection
    vm.message = "Your selection is " + vm.radioSelection;

    /**
    * **This does not have any response, not working**
    $scope.$watch(vm.radioSelection, function(newVal, oldVal) {
      vm.message = newVal;
    }, true);
    */

  }
}())

Lastly, I have the following block of code in my ui.router config that is relevant to the about us page:

.state('home.about', {
      url: '/about',
      templateUrl: 'about.html',
      controller: 'aboutController as aboutView'
    })

Rmuller's answer is good. Have a look at https://github.com/christopherthielen/angular-360-no-scope for another approach without injecting $scope. — Chris T, Mar 23 '15 at 00:42
possible duplicate of [Angularjs: 'controller as syntax' and $watch](http://stackoverflow.com/questions/24078535/angularjs-controller-as-syntax-and-watch) — Damjan Pavlica, Aug 18 '15 at 09:09

score 14 · Accepted Answer · edited Nov 22 '19 at 03:40

14

The following works:

$scope.$watch(
  function() { return vm.radioSelection}, 
  function(newVal, oldVal) {
    vm.message = "Your selection is " + newVal;
  }, 
  true
);

Plunkr

edited Nov 22 '19 at 03:40

Theraot

31,890
5
57
86

answered Mar 22 '15 at 22:46

rmuller

1,837
12
12

score 0 · Answer 2 · answered Jan 19 '16 at 12:19

0

You can try this one, use 'aboutView' as you set in controller As instead of vm.

$scope.$watch('aboutView.radioSelection', function(newVal,     oldVal) {
    vm.message = "Your selection is " + newVal;
});

answered Jan 19 '16 at 12:19

Raja Jaganathan

33,099
4
30
33

Woudln't this couple the controller with the view? I mean, it compromises the way "MyController as *name*" has to be called, based on the controller's $watch function. – AFP_555 Jun 15 '17 at 01:46

AngularJS: use $scope.$watch with controller as syntax

2 Answers2