title: $watch or ng-change, to detect onchange on a range input and process according to the value
body: <p>I am new to AngularJS/Ionic and I am trying to detect the change of value of an input type="range", and to do things in js depending on this value.</p>
  
  <p>But I am not sure how to detect it : $watch or ng-change ?</p>
  
  <p>Here's the code :
  HTML:</p>
  
  <pre><code>    &lt;html ng-app="SnowBoard"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
  
      &lt;title&gt;Checkboxes&lt;/title&gt;
  
      &lt;link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"&gt;
      &lt;script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-controller="ComputeCtrl"&gt;
  
      &lt;ion-content&gt;
  
        &lt;div class="range"&gt;
          &lt;input id="levelrange" type="range" min="0" max="10" value="5" name="userlevelofsurfing" ng-model="levelvalue" ng-change="setLevelText()"&gt;
          {{levelvalue}}
        &lt;/div&gt;
  
        &lt;div id="leveldisplay"&gt;
        &lt;/div&gt; 
  
        {{testvariable}}
  
      &lt;/ion-content&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>   angular.module('SnowBoard', ['ionic'])
  
  .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      if(window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
      if(window.StatusBar) {
        // org.apache.cordova.statusbar required
        StatusBar.styleDefault();
      }
    });
  })
  
  .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
  
      .state('app', {
        url: "/app",
        abstract: true,
        templateUrl: "templates/menu.html",
        controller: 'AppCtrl'
      })
  
  
      .state('app.browse', {
        url: "/browse",
        views: {
          'menuContent' :{
            templateUrl: "templates/compute.html",
            controller: 'ComputeCtrl'
          }
        }
      })
  
    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/app/playlists');
  })
  
  .controller('ComputeCtrl', function($scope, $ionicPopup, $timeout) {
  
    $scope.data = {
      levelvalue: 5,
      level1wordDescription: "INTERMEDIATE+",
      testvariable: "dummy"
    }
  
    $scope.$watch('data.levelvalue', function(newVal, oldVal) {
      console.log('data.levelvalue is now '+newVal);  
      console.log('data.levelvalue is now '+data.levelvalue);
  
    });
  
    $scope.setLevelText = function(rangeValue) {
      console.log('range value has changed to :'+$scope.data.levelvalue);
      $scope.data.testvariable = $scope.data.levelvalue;
    }
  
  
  
  });
  </code></pre>
  
  <p><a href="http://codepen.io/LouisDoe/pen/jEEJxd" rel="nofollow">http://codepen.io/LouisDoe/pen/jEEJxd</a></p>