title: Angular error with ng-repeat
body: <p>The last three hours I made a little app. It's not ready yet, but there is an error. I can not figure out, what's wrong.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;html lang="en" ng-app="reporting"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;title&gt;.reporting&lt;/title&gt;
  
  &lt;!-- BOOTSTRAP --&gt;
  &lt;link href="Content/bootstrap.css" rel="stylesheet" /&gt;
  &lt;!-- BOOTSTRAP --&gt;
  &lt;!-- JQUERY --&gt;
  &lt;script src="Scripts/jquery-2.1.4.js"&gt;&lt;/script&gt;
  &lt;!-- JQUERY --&gt;
  &lt;!-- EDITOR --&gt;
  &lt;script src="Scripts/wysihtml5-editor/bootstrap3-wysihtml5.all.min.js"&gt;&lt;/script&gt;
  &lt;link href="Scripts/wysihtml5-editor/bootstrap3-wysihtml5.css" rel="stylesheet" /&gt;
  &lt;script src="Scripts/wysihtml5-editor/bootstrap3-wysihtml5.min.js"&gt;&lt;/script&gt;
  &lt;!-- EDITOR --&gt;
  &lt;!-- ANGULAR --&gt;
  &lt;script src="Scripts/angular.js"&gt;&lt;/script&gt;
  &lt;!-- ANGULAR --&gt;
  &lt;!-- CUSTOM --&gt;
  &lt;link href="css/app.css" rel="stylesheet" /&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'&gt;
  &lt;!--&lt;script src="js/init.js"&gt;&lt;/script&gt;--&gt;
  &lt;script src="js/controller.js"&gt;&lt;/script&gt;
  &lt;!-- CUSTOM --&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="top" class="row"&gt;
      &lt;div id="treecontainer" class="col-md-4" ng-controller="TreeController as treeCtrl"&gt;
          &lt;header&gt;
              &lt;h2&gt;Übersicht, {{treeCtrl.text}}, {{2 + 2}}&lt;/h2&gt;
          &lt;/header&gt;
          &lt;content id="tree"&gt;
              &lt;ul ng-repeat="knoten in treeCtrl.treedata"&gt;
                  &lt;li&gt;H: {{knoten.name}}&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/content&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is my controller.js:</p>
  
  <pre><code>(function () { 
  var reportapp = angular.module('reporting', []);
  
  reportapp.controller('TreeController', ['$http', '$scope', function ($http, $scope) {
  $scope.treedata = [{
      "name": "Titel",
      "id": "1"
  },
  {
      "name": "Allgemeine Standardangaben",
      "id": "2"
  }];
  $scope.text = "Hallo";
  
  $http.get('../data/tree.json').success(function (data) {
      $scope.treedata = data;
      console.log($scope.treedata);
  });
  
  }]);
  })();
  </code></pre>
  
  <p>The problem is, that the ng-repeat in my HTML does not render. Eyerything after the <code>content</code>-tag is empty. <code>{{treeCtrl.text}}</code> in the headline won't render too.
  Might there anything be wrong with the scope? 
  I watched two hours for a solution but can't imagine, what this would be...</p>
  
  <p>Thanks for your suggestions. </p>
  
  <p><strong>SOLUTION</strong></p>
  
  <p>Here is my working code. Hope, this will help someone:</p>
  
  <p>index.html:</p>
  
  <pre><code>...
  &lt;div id="treecontainer" class="col-md-4" ng-controller="TreeController as treeCtrl"&gt;
          &lt;header&gt;
              &lt;h2&gt;Übersicht, {{treeCtrl.text}}&lt;/h2&gt;
          &lt;/header&gt;
          &lt;content id="tree"&gt;
              &lt;ul ng-repeat="knoten in treedata"&gt;
                  &lt;li&gt;{{knoten.name}}&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/content&gt;
      &lt;/div&gt;
  ...
  </code></pre>
  
  <p>and the controller.js:</p>
  
  <pre><code>(function () { 
  var reportapp = angular.module('reporting', []);
  
  reportapp.controller('TreeController', ['$http', '$scope', function ($http, $scope) {
  $scope.treedata = [];
  $scope.text = "Hallo";
  
  $http.get('../data/tree.json').success(function (data) {
      $scope.treedata = data;
  });
  }]);
  })();
  </code></pre>
  
  <p>Thanks everybody.</p>