title: Angular JS and Unobtrusive JavaScript
body: <p>I'm just getting into learning MVC and Angular and I'm curious about code such as the following (taken from angularjs.org)</p>
  
  <pre><code>&lt;html ng-app&gt;
  &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/Todo.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="todo.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h2&gt;
          Todo&lt;/h2&gt;
      &lt;div ng-controller="TodoCtrl"&gt;
          &lt;span&gt;{{remaining()}} of {{todos.length}} remaining&lt;/span&gt; [ &lt;a href="" ng-click="archive()"&gt;
              archive&lt;/a&gt; ]
          &lt;ul class="unstyled"&gt;
              &lt;li ng-repeat="todo in todos"&gt;
                  &lt;input type="checkbox" ng-model="todo.done"&gt;
                  &lt;span class="done-{{todo.done}}"&gt;{{todo.text}}&lt;/span&gt; &lt;/li&gt;
          &lt;/ul&gt;
          &lt;form ng-submit="addTodo()"&gt;
          &lt;input type="text" ng-model="todoText" size="30" placeholder=""&gt;
          &lt;input class="btn-primary" type="submit" value="add"&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Todo.js</p>
  
  <pre><code>function TodoCtrl($scope) {
      $scope.todos = [
      { text: 'learn angular', done: true },
      { text: 'build an angular app', done: false}];
  
      $scope.addTodo = function () {
          $scope.todos.push({ text: $scope.todoText, done: false });
          $scope.todoText = '';
      };
  
      $scope.remaining = function () {
          var count = 0;
          angular.forEach($scope.todos, function (todo) {
              count += todo.done ? 0 : 1;
          });
          return count;
      };
  
      $scope.archive = function () {
          var oldTodos = $scope.todos;
          $scope.todos = [];
          angular.forEach(oldTodos, function (todo) {
              if (!todo.done) $scope.todos.push(todo);
          });
      };
  }
  </code></pre>
  
  <p>If the tenets of unobtrusive javascript say that we need to separate behavior from presentation, why is it OK and best practice for angular to have code like <code>ng-click=archive()</code>?</p>