title: AngularJS class ng-scope is not being added
body: <p>I"m following the Angular Tutorials and I see in their example that <strong>ng-scope</strong> is added to each element with a directive.</p>
  
  <p><a href="https://docs.angularjs.org/guide/scope" rel="nofollow noreferrer">https://docs.angularjs.org/guide/scope</a></p>
  
  <p>But my own code does <strong>NOT</strong> add the <strong>ng-scope</strong> for each directive, every thing seems to work from rendering the data, but for some reason this CSS class is not added.</p>
  
  <p>My Application has started life from a Yeoman.io starter project so I'm not sure if something in that project has caused the issue.</p>
  
  <p><a href="https://github.com/diegonetto/generator-ionic" rel="nofollow noreferrer">https://github.com/diegonetto/generator-ionic</a></p>
  
  <p>Ive added the www code as a .zip in my dropbox:</p>
  
  <p><a href="https://www.dropbox.com/s/hn36080isu83vw5/www.zip" rel="nofollow noreferrer">https://www.dropbox.com/s/hn36080isu83vw5/www.zip</a></p>
  
  <p>Tutorial Example</p>
  
  <p><img src="https://i.stack.imgur.com/28tNu.png" alt="Tutorial Example"></p>
  
  <p>My Example</p>
  
  <p><img src="https://i.stack.imgur.com/sZox2.png" alt="My Example"></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;h1 style="margin-top: 50px;"&gt;Scope Heirachy&lt;/h1&gt;
  
  &lt;div class="show-scope-demo"&gt;
      &lt;div ng-controller="ParentGreetController"&gt;
          Hello {{name}}!
      &lt;/div&gt;
      &lt;div ng-controller="ChildListController"&gt;
          &lt;ol&gt;
              &lt;li ng-repeat="name in names"&gt;{{name}} from {{department}}&lt;/li&gt;
          &lt;/ol&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Controller.JS</p>
  
  <pre><code>var moduleTest = angular.module('test', []);
  
  
  moduleTest
      .controller('ParentGreetController', ['$scope', '$rootScope', function ($scope, $rootScope)
      {
          $scope.name = 'World';
          $rootScope.department = 'Angular';
      }])
  
      // We will access name which is in both scopes
      .controller('ChildListController', ['$scope', function ($scope)
      {
          $scope.names = ['Igor', 'Misko', 'Vojta'];
      }]);
  </code></pre>
  
  <p>App.JS</p>
  
  <pre><code>// Ionic Starter App
  
  // angular.module is a global place for creating, registering and retrieving Angular modules
  // 'starter' is the name of this angular module example (also set in a &lt;body&gt; attribute in index.html)
  // the 2nd parameter is an array of 'requires'
  // 'starter.controllers' is found in controllers.js
  angular.module('starter', ['ionic', 'starter.controllers', 'invoice1', 'invoice2', 'invoice3', 'test', 'myService'])
  
  .run(function ($ionicPlatform) {
      $ionicPlatform.ready(function () {
          // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
          // for form inputs)
          if (window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {
              cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
          }
          if (window.StatusBar) {
              // org.apache.cordova.statusbar required
              StatusBar.styleDefault();
          }
      });
  })
  
  .config(function ($stateProvider, $urlRouterProvider) {
      $stateProvider
  
      .state('app', {
          url: "/app",
          abstract: true,
          templateUrl: "templates/menu.html",
          controller: 'AppCtrl'
      })
  
      .state('app.search', {
          url: "/search",
          views: {
              'menuContent': {
                  templateUrl: "templates/search.html"
              }
          }
      })
  
      .state('app.browse', {
          url: "/browse",
          views: {
              'menuContent': {
                  templateUrl: "templates/browse.html"
              }
          }
      })
      .state('app.playlists', {
          url: "/playlists",
          views: {
              'menuContent': {
                  templateUrl: "templates/playlists.html",
                  controller: 'PlaylistsCtrl'
              }
          }
      })
  
      .state('app.scopeHeirachy', {
          url: "/scopeHeirachy",
          views: {
              'menuContent': {
                  templateUrl: "templates/sample/scopeHeirachy.html"
              }
          }
      })
  
  
  
      ;
      // if none of the above states are matched, use this as the fallback
      $urlRouterProvider.otherwise('/app/playlists');
  });
  </code></pre>
  
  <p>I have tried setting debugInfoEnabled on &amp; off using the following</p>
  
  <pre><code>.config(function($stateProvider, $urlRouterProvider, $compileProvider) {
          $compileProvider.debugInfoEnabled(false);
  
      });
  </code></pre>
  
  <p>and</p>
  
  <pre><code>.config(function($stateProvider, $urlRouterProvider, $compileProvider) {
          $compileProvider.debugInfoEnabled(true);
  
      });
  </code></pre>