title: Why is a dynamic input value not showing a change with Angularjs?
body: <p>I have a input with <code>ng-model="articleTitle"</code> and a div with <code>{{articleTitle</code>. When someone types in the input the div is updated.</p>
  
  <p>However, I have a box that lists all the articles with <code>&lt;div class="element"&gt;...&lt;/div&gt;</code> around them. When a person clicks a list div I want the input to update then in turn the div that shows the title.</p>
  
  <p>Everything works if I type in the input box. However, selecting an article does update the input box but not the div. If I add anything into the input box the div does update.</p>
  
  <p>How, can I tell Angularjs that the input changed without interacting direction with the input?</p>
  
  <p>----- edit -----</p>
  
  <p>per request I've added some relevant code. This also include suggestions by mohamedrias :</p>
  
  <p>html:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml" class="wp-toolbar ng-scope" lang="en-US" ng-app="coverEditor"&gt;
  ...
  &lt;div class="feature box" ng-controller="featureBox"&gt;
      &lt;div class="item"&gt;
          &lt;div class="edit"&gt;
              &lt;img src="/edit-image" /&gt;
              &lt;div class="form-elements"&gt;
                  &lt;p class="title"&gt;Feature Settings&lt;/p&gt;
                  &lt;div class="element"&gt;
                      &lt;p class="select-trigger"&gt;Article&lt;/p&gt;
                      &lt;div class="select-box" id="set-article"&gt;
                          &lt;p class="title"&gt;Select Article&lt;/p&gt;
                          &lt;div class="element current" data-value="11"&gt;Test Article&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="element"&gt;
                      &lt;input type="text" name="feature" id="feature" ng-model="article.featureTitle" class="article-title" placeholder="Title" /&gt;
                  &lt;/div&gt;
                  ...
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="item-content featureBackColor"&gt;
              &lt;h1&gt;{{article.featureTitle}}&lt;/h1&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>angular-scripts.js (loads in header)</p>
  
  <pre><code>var coverEditor = angular.module("coverEditor",['ngRoute']);
  
  coverEditor.controller('featureBox',function($scope){
      $scope.article = {};
  });
  </code></pre>
  
  <p>admin.js (jquery that loads in the footer)</p>
  
  <pre><code>$('#set-article .element').click(function(){
      var articleElement = $(this);
      var articleTitle = articleElement.text();
  
      $('#theme-layout .element').removeClass('current');
      articleElement.addClass('current');
      articleElement.closest('.form-elements').find('.article-title').val(articleTitle);
  });
  </code></pre>
  
  <p>The purpose of the jquery is to get values/text from the selected article and place it in the input changing the value and hopefully updating the title via angular.</p>
  
  <p>----- edit -----</p>
  
  <p>code update</p>
  
  <p>html:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml" class="wp-toolbar ng-scope" lang="en-US" ng-app="coverEditor"&gt;
      ...
      &lt;div class="feature box" id="featureBox" ng-controller="featureBox"&gt;
          &lt;div class="item"&gt;
              &lt;div class="edit"&gt;
                  &lt;img src="/edit-image" /&gt;
                  &lt;div class="form-elements"&gt;
                      &lt;p class="title"&gt;Feature Settings&lt;/p&gt;
                      &lt;div class="element"&gt;
                          &lt;p class="select-trigger"&gt;Article&lt;/p&gt;
                          &lt;div class="select-box" id="set-article"&gt;
                              &lt;p class="title"&gt;Select Article&lt;/p&gt;
                              &lt;div class="element current" data-value="11"&gt;Test Article&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="element"&gt;
                          &lt;input type="text" name="feature" id="feature" ng-model="article.featureTitle" class="article-title" placeholder="Title" /&gt;
                      &lt;/div&gt;
                      ...
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="item-content featureBackColor"&gt;
                  &lt;h1&gt;{{article.featureTitle}}&lt;/h1&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>angular-script.js:</p>
  
  <pre><code>var coverEditor = angular.module("coverEditor",['ngRoute']);
  
  coverEditor.controller('featureBox',function($scope){
      $scope.article = {};
  
      //set artcle
      jQuery('#set-article .element').click(function(){
          var articleElement = jQuery(this);
          var articleTitle = articleElement.text();
          var scope = angular.element("#featureBox").scope();
  
          jQuery('#theme-layout .element').removeClass('current');
          articleElement.addClass('current');
          articleElement.closest('.form-elements').find('.article-title').val(articleTitle);
          scope.$apply();
      });
  });
  </code></pre>