title: Ionic structure same as Angularjs
body: <p>I know a little bit about Angularjs (I'm still learning) and now I want to learn Ionic too. I tried to have same structure approach for code organization, but it seems that I don't know how to make same code works on Ionic. Can someone helps me, I will write my code first and then explain what is the problem.</p>
  
  <p>index</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;link href="lib/ionic/css/ionic.css" rel="stylesheet"&gt;
      &lt;link href="css/style.css" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body ng-app="starter"&gt;
  
      &lt;ion-nav-view&gt;&lt;/ion-nav-view&gt;
  
      &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;
  
      &lt;script src="cordova.js"&gt;&lt;/script&gt;
      &lt;script src="app/application.js"&gt;&lt;/script&gt;
      &lt;script src="app/controllers/userDataCtr.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app</p>
  
  <pre><code>angular.module('starter', ['ionic'])
  
      .run(function($ionicPlatform) {
          $ionicPlatform.ready(function() {
              if(window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {
                  cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
                  cordova.plugins.Keyboard.disableScroll(true);
              }
              if(window.StatusBar) {
                  StatusBar.styleDefault();
              }
          });
      })
  
  .config(function ($stateProvider, $urlRouterProvider) {
      $stateProvider
  
          .state('home', {
              url: '/home',
              controller: 'userDataCtr',
              templateUrl: 'app/views/home.html'
          })
  
      ;
  
      // if none of the above states are matched, use this as the fallback
      $urlRouterProvider.otherwise('/home');
  });
  </code></pre>
  
  <p>controller</p>
  
  <pre><code>(function() {
      'use strict';
  
      angular
          .module('starter')
          .controller('userDataCtr', userDataCtr);
  
      userDataCtr.$inject=['$state','$window'];
  
      function userDataCtr($state,$window) {
  
          var vm = this;
  
          vm.test = test;
  
          function test() {
              vm.testing = "Does work?";
          }
      }
  })();
  </code></pre>
  
  <p>home view</p>
  
  <pre><code>&lt;div ng-init="userDataCtr.test()"&gt;{{testing}}&lt;/div&gt;
  </code></pre>
  
  <p>When I start application I get nothing on screen, blank page. It seems like function is not even started. Does anyone know where I'm wrong?</p>
  
  <p>Thanks</p>
  
  <p>Edit:</p>
  
  <p>Now I figure out that if I change this:</p>
  
  <pre><code>(function() {
      'use strict';
  
      angular
          .module('starter')
          .controller('userDataCtr', userDataCtr);
  
      userDataCtr.$inject=['$state','$window'];
  
      function userDataCtr($state,$window) {
  
          var vm = this;
  
          vm.test = test;
  
          function test() {
              vm.testing = "Does work?";
          }
      }
  })();
  </code></pre>
  
  <p>to this:</p>
  
  <pre><code>(function() {
      'use strict';
  
      angular
          .module('starter')
          .controller('userDataCtr', userDataCtr);
  
      userDataCtr.$inject=['$state','$window','$scope'];
  
      function userDataCtr($state,$window,$scope) {
  
          $scope.test - function() {
              $scope.testing = "Does work?";
          }
      }
  })();
  </code></pre>
  
  <p>Works !!</p>
  
  <p>But I don't want to use $scope. Does anyone knows why first solution fail and another works?</p>