title: How to properly setup AngularJS files
body: <p>Im familiar with the standard way of setting up a <code>angularjs</code> project, what I'm trying to do is set the app with separate files for different controllers and directives based on the page. See below for better explanation.</p>
  
  <pre><code>www /
     app.js
     index.html
      login /
           loginDirective.js
           loginPage.html
  </code></pre>
  
  <p>This is my apps.js file</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'
  
  (function () {
     'use strict';
      angular.module('app', ['ionic']);
  
  })();
  
  
  var app=angular.module('app');
  
  app.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      if(window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  
        // Don't remove this line unless you know what you are doing. It stops the viewport
        // from snapping when text inputs are focused. Ionic handles this internally for
        // a much nicer keyboard experience.
        cordova.plugins.Keyboard.disableScroll(true);
      }
      if(window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })
  </code></pre>
  
  <p>this is my loginDirective.js</p>
  
  <pre><code>(function () {
      'use strict';
  
      var app=angular.module('app');
  
  app.config(function($stateProvider) {
  
  $stateProvider
  
  .state('login', {
      url: '/login',
      template: '&lt;loginDirective&gt;&lt;/loginDirective&gt;'
  })
  })
      app.directive('loginDirective', loginDirective);
  
  function loginDirective() {
      var directive = {
          restrict : 'EA',
          templateUrl : 'loginPage.html',
          controller : loginController,
          controllerAs : 'lg',
          bindToController : true
  };
  
  return directive;
  
  }
  
  function loginController() {
  var lg = this;
  lg.test = 'this is a test';
  
  console.log('RETURN = %s', 'test');
  
  }
  
  })();
  </code></pre>
  
  <p>this is my index.html</p>
  
  <pre><code> &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;!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
      &lt;link href="css/ionic.app.css" rel="stylesheet"&gt;
      --&gt;
  
      &lt;!-- ionic/angularjs js --&gt;
      &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;
  
      &lt;!-- cordova script (this will be a 404 during development) --&gt;
      &lt;script src="cordova.js"&gt;&lt;/script&gt;
  
      &lt;!-- your app's js --&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;script src="login/loginDirective.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body ng-app="app" animation="slide-left-right-ios7"&gt;
  &lt;div&gt;
      &lt;div&gt;
            &lt;ion-nav-bar class="bar-dark"&gt;
          &lt;ion-nav-title&gt;Sample APP&lt;/ion-nav-title&gt;
  &lt;ion-nav-back-button class="button-icon icon ion-ios-arrow-back"&gt;Back&lt;/ion-nav-back-button&gt;
        &lt;/ion-nav-bar&gt;
  &lt;ion-nav-view &gt;&lt;/ion-nav-view&gt;
  &lt;/div&gt;s
  &lt;/div&gt;
    &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>last but not least loginPage.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div login-directive&gt;&lt;/div&gt;
  &lt;ion-view view-title="Login" name="login-view" class="scroll-bg" hide-nav-bar="true"&gt;
    &lt;ion-content class="padding"&gt;
    &lt;div  align="center" class="imagecontent"&gt;
     &lt;div style="text-align: center"&gt;
    &lt;img ng-src="img/logos@2x.png" width="250px"&gt;
    &lt;/div&gt;
    &lt;/div&gt;
        &lt;div class="list list-inset"&gt;
            &lt;label class="item item-input"&gt;
                &lt;input type="text" placeholder="Username" style="color: #ffffff" ng-model="data.username"&gt;
            &lt;/label&gt;
            &lt;label class="item item-input"&gt;
                &lt;input type="password" placeholder="Password" style="color: #ffffff" ng-model="data.password"&gt;
            &lt;/label&gt;
        &lt;/div &gt;
        &lt;div class="" &gt;
        &lt;div  class=""&gt;
        &lt;button class=" button  button-block button-dark" ng-click="login(data)"&gt;LOG IN&lt;/button&gt;
        &lt;/div&gt;
        &lt;/div&gt;
  
    &lt;/ion-content&gt;
      &lt;div style="position: absolute; bottom: 10%; width: 100%"&gt;
        &lt;div style="text-align: center"&gt;
          &lt;img ng-src="img/FNC_Logo.png" width="150px"&gt;
          &lt;/div&gt;
          &lt;/div&gt;
    &lt;ion-footer-bar align-title="right" class="footer-bg"&gt;
          &lt;div class="col text-right" ng-click="doSomething()"&gt;
      &lt;button class="button footerbtn-bg" &gt;&lt;/button&gt;
    &lt;/div&gt;
  &lt;/ion-footer-bar&gt;
  &lt;/ion-view&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What am I doing incorrectly that causes my loginPage.html to not show up?</p>