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'
    })

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'
    })

• javascript
• angularjs
• controller
• scope
• angular-ui-router

• 1 Rmuller's answer is good. Have a look at github./christopherthielen/angular-360-no-scope for another approach without injecting $scope. – Chris T Commented Mar 23, 2015 at 0:42
• possible duplicate of Angularjs: 'controller as syntax' and $watch – Damjan Pavlica Commented Aug 18, 2015 at 9:09

2 Answers 2

The following works:

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

Plunkr

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;
});