title: Does ng-include have memory-leak?
body: <p>I use <code>ng-include</code> to switch different data pages which will do a lot of data rendering.</p>
  
  <p>I found the memory usage of the browser keeps growing, and never fall back.</p>
  
  <h2>code</h2>
  
  <p>The code is quite simple.</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;body ng-controller="MainCtrl"&gt;
    &lt;div&gt;
      &lt;button ng-click="url='nodata.html'"&gt;No data&lt;/button&gt;
      &lt;button ng-repeat="i in getNumArray(10)" ng-click="loadData(i)"&gt;Load data {{i}}&lt;/button&gt;
    &lt;/div&gt;
    &lt;hr/&gt;
    [{{url}}]
    &lt;div ng-include="url"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>It will show a "no data" button, and 10 data buttons to load different pages.</p>
  
  <p>The angular code:</p>
  
  <pre><code>app.controller('MainCtrl', function($scope) {
    $scope.url = "nodata.html";
    $scope.loadData = function(n) {
      $scope.url = "data" + n + ".html";
    }
  
    $scope.getNumArray = function(n) {
      var arr = [];
      for(var i =0;i&lt;n;i++) {
        arr.push(i);
      }
      return arr;
    }
  });
  
  app.controller('DataCtrl', function($scope, $http){
    $http.get('data.json').success(function(data){
        $scope.data = data;
    })
  });
  </code></pre>
  
  <p>And the "dataN.html" pages:</p>
  
  <pre><code>&lt;div ng-controller="DataCtrl"&gt;
    &lt;table ng-repeat="x in getNumArray(500)"&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;{{data["key0"]}}&lt;/td&gt;
          &lt;td&gt;{{data["key1"]}}&lt;/td&gt;
          &lt;td&gt;{{data["key2"]}}&lt;/td&gt;
          &lt;td&gt;{{data["key3"]}}&lt;/td&gt;
          &lt;td&gt;{{data["key4"]}}&lt;/td&gt;
          &lt;td&gt;{{data["key5"]}}&lt;/td&gt;
          &lt;td&gt;{{data["key6"]}}&lt;/td&gt;
          &lt;td&gt;{{data["key7"]}}&lt;/td&gt;
          &lt;td&gt;{{data["key8"]}}&lt;/td&gt;
          &lt;td&gt;{{data["key9"]}}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The "nodata.html" page:</p>
  
  <pre><code>&lt;div&gt;No data yet.&lt;/div&gt;
  </code></pre>
  
  <p>And the "data.json":</p>
  
  <pre><code>{
    "key0": "sdf sdf sdf sdf sdf sdf sdf sdf sdf sd fds fds fsd fds fds fds fds fsd fds fds f",
    "key1": "sdf sdf sdf sdf sdf sdf sdf sdf sdf sd fds fds fsd fds fds fds fds fsd fds fds f",
    "key2": "sdf sdf sdf sdf sdf sdf sdf sdf sdf sd fds fds fsd fds fds fds fds fsd fds fds f",
    "key3": "sdf sdf sdf sdf sdf sdf sdf sdf sdf sd fds fds fsd fds fds fds fds fsd fds fds f",
    "key4": "sdf sdf sdf sdf sdf sdf sdf sdf sdf sd fds fds fsd fds fds fds fds fsd fds fds f",
    "key5": "sdf sdf sdf sdf sdf sdf sdf sdf sdf sd fds fds fsd fds fds fds fds fsd fds fds f",
    "key6": "sdf sdf sdf sdf sdf sdf sdf sdf sdf sd fds fds fsd fds fds fds fds fsd fds fds f",
    "key7": "sdf sdf sdf sdf sdf sdf sdf sdf sdf sd fds fds fsd fds fds fds fds fsd fds fds f",
    "key8": "sdf sdf sdf sdf sdf sdf sdf sdf sdf sd fds fds fsd fds fds fds fds fsd fds fds f",
    "key9": "sdf sdf sdf sdf sdf sdf sdf sdf sdf sd fds fds fsd fds fds fds fds fsd fds fds f"
  }
  </code></pre>
  
  <h2>Here is a live demo:</h2>
  
  <p><a href="http://plnkr.co/edit/KGZVXIBws1kthgN2bxEJ?p=preview" rel="noreferrer">http://plnkr.co/edit/KGZVXIBws1kthgN2bxEJ?p=preview</a> </p>
  
  <p>When I open the live demo with chrome, the initialize memory usage is less than 100M. Then I click the "Load data" buttons, it will soon grow to 300M and never fall back, even if I click "No data" button to load the "nodata.html".</p>
  
  <p>Is it normal? Does the <code>ng-include</code> have memory leak or do I missing anything? Or the memory usage is just fine that I don't need to worry about it?</p>
  
  <h2>screencast</h2>
  
  <p>I created a screencast to show it:</p>
  
  <p><img src="https://i.stack.imgur.com/K6byQ.gif" alt="ng-include"></p>