title: ISSUE: can't access Json data inside the html template, AngularJS
body: <p>I am using combination of AngularJS 1.5.x and Angular Material. I have data stored in ../JSON/data.json, I am testing the whole thing in python3 localhost server. </p>
  
  <p>The data is retrieved correctly and shows up in the Google Chrome Consoler</p>
  
  <p>I have an HTML template</p>
  
  <pre><code>&lt;md-tab label="one" class="material-tab"&gt;
    &lt;md-content class="md-padding" layout="column" layout-align="center center"&gt;
      &lt;md-card class="card-tab card-bg"&gt;
        &lt;md-card-title&gt;
          &lt;md-card-title-text&gt;
            &lt;span class="md-headline"&gt; {{vm.info[0].tab}} Bone Bone&lt;/span&gt;
            &lt;span class="md-subhead"&gt;Text&lt;/span&gt;
          &lt;/md-card-title-text&gt;
          &lt;md-card-title-media&gt;
            &lt;img class="md-media-lg" src="../IMG/favicon.png" /&gt;
          &lt;/md-card-title-media&gt;
        &lt;/md-card-title&gt;
        &lt;md-card-actions&gt;
          &lt;md-button class="md-raised md-primary"&gt;See More&lt;/md-button&gt;
          &lt;md-button class="md-raised md-warn"&gt;Full List&lt;/md-button&gt;
          &lt;md-button class="md-raised md-primary button-right"&gt;Email&lt;/md-button&gt;
        &lt;/md-card-actions&gt;
      &lt;/md-card&gt;
    &lt;/md-content&gt;
  &lt;/md-tab&gt;
  </code></pre>
  
  <p>I have a js directive and controller attached to it </p>
  
  <pre><code>(function() {
    angular
      .module('webApp')
      .controller('showcaseController', showcaseController)
      .directive('boneShowcaseTab', boneShowcaseTab);
  
    showcaseController.$inject = ['$http'];
  
    function showcaseController($http) {
      var vm = this;
  
      vm.info = [];
  
      $http.get('../JSON/data.json').success(function(response) {
        console.log("Loaded data.json");
        console.log(JSON.stringify(response));       // TODO remove
  
        vm.info = response.data.information;
      });
    };
  
    function boneShowcaseTab($http) {
      return {
        restrict: 'E',
        templateUrl: '../TEMPLATES/tabs.html',
        controller: 'showcaseController',
        controllerAs: 'tabs'
      };
    };
  })();
  </code></pre>
  
  <p>However when I try to access the json data {{vm.info[0].tab}} nothing is being displayed. </p>
  
  <p>More importantly, when I try to attach <strong>ng-repeat</strong> to the <strong>md-tab</strong> the whole thing disappears. Here is how I reference the directive </p>
  
  <pre><code>  &lt;md-tabs flex md-dynamic-height md-border-bottom md-stretch-tabs="always"&gt; &lt;bone-showcase-tab&gt;&lt;/bone-showcase-tab&gt;                                   &lt;!-- CUSTOM TABS --&gt;
    &lt;/md-tabs&gt;
  </code></pre>
  
  <p>So... question is... where did I done goofed? </p>
  
  <p>P.S. I am still a newbie in Angular, so pardon any "bad code". </p>
  
  <p>P.P.S. the ng-repeat logic is not here yet, as I have trouble accessing JSON data :) </p>
  
  <p>P.P.P.S Can't access any variable. Even if I create a test <code>vm.test = "test"</code> I can't access it in any way.  </p>