title: Watch rangeSlider values changes with AngularJS
body: <p>I have a jQuery slider implemented through a directive in AngularJS, which looks something like this:</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div class="slider-container"&gt;
      &lt;div slider&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>directive</strong></p>
  
  <pre><code>myApp.directive('slider', function() {
      return {
          link: function(scope, elem, attrs) {
  
              //slider settings, .noUiSlider is the method to initialize the slider
              elem.noUiSlider({
                  range: [0,1440],
                  start: [690,750],
                  step: 30,
                  connect: true
              });
          }
      };
  });
  </code></pre>
  
  <p>This succesfully implements the slider, but calling the method <strong>val()</strong> on elem (my slider) only works once, right when the slider is implemented. I know I need to use some form of <strong>$watch</strong> but I don't know how to do it without the directive itself having an attribute (and then accessing it via <strong>attrs</strong>), which is doesn't.</p>
  
  <p>Essentially, I want to watch for changes to elem.val(), and print off the values when they change - not sure how to go about doing that.</p>
  
  <p>Note: This code is all within an ng-switch, which I'm hoping isn't making my life much, much worse.</p>
  
  <p>Thank you for the help!</p>