title: AngularJS data binding not working
body: <p>I wrote some simplified code on <a href="http://jsfiddle.net/gsche/1/" rel="nofollow">http://jsfiddle.net/gsche/1/</a></p>
  
  <p>When I click the "Refresh" link, the "customer.name" model doesn't update the view. </p>
  
  <p>I wrote the code on my local computer and debugged it with Batarang in Chrome. </p>
  
  <p>The console doesn't show any errors. The Model page in Batarang shows the customer name changing on the right, associated with an old scope id, but the id's of the $scopes also change.</p>
  
  <p>Can anyone point me in the right direction?</p>
  
  <pre><code>&lt;div ng-app&gt;
      &lt;div ng-controller="MainCtrl"&gt;
           &lt;p&gt; &lt;a href="#" ng-click="Refresh()"&gt;Refresh&lt;/a&gt; &lt;/p&gt;
          &lt;p&gt;
              &lt;input type="text" ng-model="customer.name"&gt;
          &lt;/p&gt;
          &lt;p&gt;{{ customer.name }}&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  function MainCtrl($scope) {
  
  
      $scope.customer = {
          name: 'TTT',
          id: 0
      };
  
      $scope.Refresh = function ($scope) {
          $scope.customer.name = 'Test';
  
      };
  
  }
  </code></pre>
  
  <p><strong>Update 1 08.08.2013</strong>
  Thank you all (@EpokK, @Stewie, @Hippocrates). I undestand now the problem with jsfiddle, and the example works as it should.</p>
  
  <p>However, in my test application, the {{customer.name}} binding works, but the "Refresh" click still doesn't change the {{customer.name}} in the view.</p>
  
  <p>Here is the content of my application. I think it is the same as the jsfiddle example:</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
    &lt;head&gt;
      &lt;title&gt;Test&lt;/title&gt;
  &lt;/head&gt;
    &lt;body ng-app="roaMobileNgApp"&gt;
  
  
      &lt;script src="scripts/angular.js"&gt;&lt;/script&gt;
  
      &lt;script src="scripts/angular-ui.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="scripts/angular-ui.css"&gt;
  
      &lt;div class="container" ng-view=""&gt;&lt;/div&gt;
  
      &lt;script src="scripts/app.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/controllers/main.js"&gt;&lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>'use strict';
  
  angular.module('roaMobileNgApp', ['ui'])
    .config(function ($routeProvider) {
      $routeProvider
        .when('/', {
          templateUrl: 'views/main.html',
          controller: 'MainCtrl'
        })
        .otherwise({
          redirectTo: '/'
        });
    });
  </code></pre>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>'use strict';
  
  angular.module('roaMobileNgApp')
    .controller('MainCtrl', function ($scope) {
  
  
      $scope.customer = {name: '',
                        id: 0};
  
  
  
      $scope.getDetails = function() {
          $scope.customer.name = 'Test';
      };
  
    });
  </code></pre>
  
  <p><strong>main.html</strong></p>
  
  <pre><code>&lt;div ng-controller="MainCtrl"&gt;
  
      &lt;a href="#" ng-click="getDetails()"&gt;Refresh&lt;/a&gt;
      &lt;p&gt;&lt;input type="text" ng-model="customer.name"&gt; {{ customer.name }} &lt;/p&gt;
  
  &lt;/div&gt;
  </code></pre>