title: how to watch changes on hidden fields with Angular?
body: <p>I have dropdown made from divs. It's not my doing, is from external agency. But this is not important. The div with a dropdown looks like this: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;label class='label-block' for='kraj-dokument'&gt;Kraj wydania dokumentu tożsamości *&lt;/label&gt;
                      &lt;input type='hidden' name='kraj-dokument' id='kraj-dokument' value="" drop-down-validation-directive /&gt; &lt;div class="select kraj-dokument" data-destination="kraj-dokument"&gt;
                          &lt;p class="label"&gt;Wybierz z listy&lt;/p&gt;
                          &lt;div class="options"&gt;
                              &lt;p class="option" data-ng-repeat="country in countries"&gt;{{country.Name}}&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>When you click on a choice in this dropdown an external javascript is adding th the hidden field attribute called value and it insert a text from the choise to that value. As you can see I have a directive on that hidden inputu which looks like this (after several searches, and everything):</p>
  
  <pre class="lang-js prettyprint-override"><code>myapp.directive("dropDownValidationDirective", function () {
  return  function(scope, elem, attr, ctrl) {
      scope.$watch(attr['value'], function(nv) {
              elem.val(nv);
          }
          );
  }  
  </code></pre>
  
  <p>});</p>
  
  <p>The problem is when I'm doing watch nothing happens, the value is not geting watched although the change is seen when debuging this in chrome. By the way. I'm trying to also do a validation on this dropdowwn. My idea was to check if this value is filled or not and tell to the user to fill the dropdown by adding a class to it wich marks this thing red. Is that the way to do it? </p>
  
  <p><strong>UPDATE</strong> I forgot to add, and I think this is also important that the click event on that div is done with the mentioned external javascript. I'm pasting it below. I've put the external javascript functionality into the service: </p>
  
  <pre class="lang-js prettyprint-override"><code>myApp.service('DropDownService', function () {
  this.renderDropDown = function () {
      function initEvents() {
          var selectClicked = $(".selectClicked");
          $(".select").each(function () {
              var destination = $(this).attr("data-destination");
              var option = $(this).find(".option");
              var options = $(this).find(".options");
              var label = $(this).find(".label");
              var select = $(this);
  
              label.click(function () {
                  if (label.hasClass("clicked")) {
                      $(".select .options").hide();
                      $(".select .label").removeClass("clicked");
                      $(".select").removeClass("clicked");
                      selectClicked.removeClass("clicked");
                  } else {
                      $(".select .label").removeClass("clicked");
                      $(".select").removeClass("clicked");
                      label.addClass("clicked");
                      select.addClass("clicked");
                      selectClicked.addClass("clicked");
                      $(".select .options").hide();
                      options.show();
                  }
              });
  
              option.unbind("click").bind("click", function () {
                  $("#" + destination).attr("value", $(this).text());
                  label.text($(this).text());
                  options.hide();                    
                  $(".select .label").removeClass("clicked");
                  $(".select").removeClass("clicked");
                  $(".select").removeClass("error");
                  selectClicked.removeClass("clicked");
              });
          });
      }
  
      angular.element(document).ready(function () {
  
          initEvents();
  
  
          if (navigator.appVersion.indexOf("Mac") !== -1) {
              $('body').addClass("MacOS");
          }
  
      });
  }
  </code></pre>