title: Angularjs - javascript not loading inside partial views
body: <p>I tried using directives to load the script but its not working, I've an application where it should display a chart(guage meter) inside a partial, tried to paste the script inside partial view but no use, even directives didn't work. 
  But if the page is normally loaded its working, when its used as partial its not showing any chart (script related things)</p>
  
  <p>Any simple example to make load the script inside partial views of angularjs?</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;!-- CSS (load bootstrap) --&gt;
      &lt;link rel="stylesheet" href="bootstrap.min.css"&gt;
  
       &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;  
  
      &lt;!-- JS (load angular, ui-router, and our custom js file) --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="angular-ui-router.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="app.js"&gt;&lt;/script&gt; 
  &lt;/head&gt;
  
  &lt;body ng-app="routerApp"&gt;
  
  &lt;!-- NAVIGATION --&gt;
  &lt;nav class="navbar navbar-inverse" role="navigation"&gt;
  
      &lt;ul class="nav navbar-nav"&gt;
          &lt;li&gt;&lt;a ui-sref="home"&gt;Customer Details&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a ui-sref="about"&gt;Job Details&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;!-- MAIN CONTENT --&gt;
  
  &lt;div class="container"&gt;
      &lt;div ui-view&gt;&lt;/div&gt;
  &lt;/div&gt;   
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>var routerApp = angular.module('routerApp', ['ui.router']);
  
  routerApp.config(function($stateProvider, $urlRouterProvider) {
  
      $urlRouterProvider.otherwise('/home');
  
      $stateProvider
  
          // HOME STATES AND NESTED VIEWS  
  
          .state('home', {
              url: '/home',
              templateUrl: 'partial-home.html'
          })
  
  
          .state('home.list', {
              url: '/list',
              templateUrl: 'partial-home-list.html',
              controller: function($scope) {
                  $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
              }
          })
  
  
              //JOB Section Navigations
  
  .state('job', {
              url: '/jobdetails',
                 templateUrl: 'jobdetails.html' 
  
          })
  
  
          // ABOUT PAGE AND MULTIPLE NAMED VIEWS  
          .state('about', {
              url: '/about',
              views: {
                  '': { templateUrl: 'partial-about.html' },
                  'columnOne@about': { template: 'Look I am a column!' },
                  'columnTwo@about': { 
                      templateUrl: 'table-data.html',
                      controller: 'scotchController'
                  }
              }
  
          });
  
  });
  
  routerApp.controller('scotchController', function($scope) {
  
      $scope.message = 'test';
  
      $scope.scotches = [
          {
              name: 'Macallan 12',
              price: 50
          },
          {
              name: 'Chivas Regal Royal Salute',
              price: 10000
          },
          {
              name: 'Glenfiddich 1937',
              price: 20000
          }
      ];
  
  });
  
  routerApp.directive('jsSidebar' , function() {
     return {
          link: function(scope, element, attrs) {
  
             alert('testing');
  
          }
     }
  });
  </code></pre>
  
  <p>partial-home.html</p>
  
  <pre><code>&lt;div &gt; Home partial page &lt;/div&gt;
   &lt;a ui-sref="job"&gt; Click to Display Chart   &lt;/a&gt;
  &lt;div ui-view&gt;&lt;/div&gt;
  </code></pre>
  
  <p>jobdetails.html</p>
  
  <pre><code>&lt;script &gt;
  //Chart library is mentioned which is over 2000lines
  &lt;/script&gt;
  &lt;!-- here  chart supposed to be rendered--&gt;
  &lt;div id="id_of_chart"&gt;&lt;/div&gt;
  &lt;div jsSidebar &gt;Testing purpose&lt;/div&gt;
  </code></pre>