title: why $scope change the value in the whole page?
body: <p>I'm learning AngularJS and I'm trying to make a todo app.
  Everything works great except that when I'm trying to add a new todo, the previous todos changing as well.
  I think it's because the <code>$scope</code> changing its value in the whole page and I want to chnage it only in the last todo which just generated.
  Maybe my code would be wrong for this purpose, again, I just started learning AngularJS.</p>
  
  <p>Hope you can help me out, here is my code:</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>var myApp = angular.module('myApp', ['ngRoute']);
  
  myApp.config(function ($routeProvider) {
  
      $routeProvider
  
      .when('/', {
          templateUrl: 'pages/main.html', 
          controller: 'mainController'
      })
  
      .when('/todo', {
          templateUrl: 'pages/todo.html',
          controller: 'subController'
       })
  
  });
  
  myApp.controller('mainController', ['$scope', function($scope){
  
  
  }]);
  
  myApp.controller('subController', ['$scope', '$compile', function($scope, $compile){
  
      $scope.getMsg = function(){ 
  
          $scope.todoHeader = $('#header').val();
          $scope.todoMsg = $('#msg').val();
  
          var item = $compile("&lt;todo-item todo-Title='{{todoHeader}}' todo-message='{{ todoMsg }}'&gt;&lt;/todo-item&gt;")($scope);
          $(".list-group").append(item);
  
      }
  }]);
  
  myApp.directive('todoItem', function(){
      return {
          templateUrl: 'directives/todoItem.html',
          scope: {
              todoTitle: "@",
              todoMessage: "@"
          }
      };
  });
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h3&gt;Todo Page&lt;/h3&gt;
  
  &lt;div style="margin:auto;margin-bottom: 10px;display:table;"&gt;
      &lt;input type="text" id="header" placeholder="Enter todo header" style="margin-right:10px;padding:5px;"&gt;&lt;br&gt;
      &lt;textarea type="text" id="msg" placeholder="Enter todo message" style="margin-right:10px;padding:5px;"&gt;&lt;/textarea&gt;&lt;br&gt;
      &lt;button type="button" class="btn btn-primary" ng-click="getMsg()"&gt;Add Todo&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div class="list-group" style="margin: auto; display: table;"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the directive (todoItem.html) code: </p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style="width:600px"&gt;
  &lt;div class="d-flex w-100 justify-content-between"&gt;
      &lt;h1 class="mb-1"&gt;{{ todoTitle }}&lt;/h1&gt; 
  &lt;/div&gt;
  &lt;p class="mb-1"&gt;{{ todoMessage }}&lt;/p&gt;
  </code></pre>
  
  <p></p>