title: JavaScript Function in angularjs Controller
body: <p>I m new to angularjs .What issue i m facing are:
  In index.html on click Report1 i want to display the report in Another html view.
  muFunc() is called on ng-click() event which is written in script.js .
  I want to initialize names[],years[] and other variable in script.js so that i can access as a dropdown in lmrAttribute.html.But nothing is getting displayed.
  Plunker Link is <a href="https://plnkr.co/edit/M2tHhilFXciiyKUX7ETT?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/M2tHhilFXciiyKUX7ETT?p=preview</a></p>
  
  <p>// index.html start here </p>
  
  <pre><code>   &lt;!DOCTYPE html&gt;
  &lt;html ng-app="myApp"&gt;
  
  &lt;head&gt;
  
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;body ng-controller="myCtrl"&gt;
  
    &lt;div class="header"&gt;
      &lt;h1&gt;Report Generation&lt;/h1&gt;
    &lt;/div&gt;
  
    &lt;div class="row"&gt;
  
      &lt;div class="col-3 menu"&gt;
        &lt;ul&gt;
          &lt;li ng-click="myFunc()"&gt;&lt;a href="LmrAttribute.html"&gt;Report1&lt;/a&gt;&lt;/li&gt;
          &lt;li ng-click="myFunc()"&gt;&lt;a href="Check.html"&gt;Report2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;Report3&lt;/li&gt;
          &lt;li&gt;Report4&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>//lmrAttribute.html start here </p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
  
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;title&gt;Bootstrap Example&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body ng-app="myApp" ng-controller="myCtrl"&gt;
  
    &lt;div class="container"&gt;
      &lt;div class="panel panel-default"&gt;
        &lt;div class="panel-heading"&gt;LM All Period Summary:&lt;/div&gt;
        &lt;div class="panel-body"&gt;
          &lt;form class="form-inline" ng-submit="myPaginationFunction()"&gt;
            &lt;div class="row"&gt;
              &lt;div class="form-group col-sm-6"&gt;
                &lt;label for="suppliername"&gt;Supplier Name: &lt;/label&gt;
                &lt;select name="supplierName" ng-model="supplier" ng-options="x for x in names"&gt;
                &lt;/select&gt;
              &lt;/div&gt;
              &lt;div class="form-group col-sm-6"&gt;
                &lt;label for="pid"&gt;PID:&lt;/label&gt;
                &lt;input type="textfiled" class="form-control" id="pid" placeholder="Enter Pid" ng-model="pid"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;br&gt;
            &lt;br&gt;
            &lt;div class="row"&gt;
              &lt;div class="form-group col-sm-6"&gt;
                &lt;label for="AgreementId"&gt;AgreementId:&lt;/label&gt;
                &lt;input type="textfiled" class="form-control" id="agreementId" placeholder="Enter agreementId" ng-model="agreementId"&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group col-sm-6"&gt;
                &lt;label for="OBLIGATION FISCAL YEAR"&gt;OBLIGATION FISCAL YEAR:&lt;/label&gt;
                &lt;select name="OBLIGATION FISCAL YEAR" ng-model="oBLIGATIONFISCALYEAR" ng-options="y for y in years"&gt;
                &lt;/select&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;br&gt;
            &lt;br&gt;
            &lt;div class="row"&gt;
              &lt;div class="form-group col-sm-6"&gt;
                &lt;label for="OBLIGATION FISCAL QUARTER"&gt;OBLIGATION FISCAL QUARTER:&lt;/label&gt;
                &lt;select name="OBLIGATION FISCAL QUARTER" ng-model="oBLIGATIONFISCAlQUARTER" ng-options="z for z in f_quarter"&gt;
                &lt;/select&gt;
              &lt;/div&gt;
              &lt;div class="form-group col-sm-6"&gt;
                &lt;label for="OBLIGATION FISCAL MONTH"&gt;OBLIGATION FISCAL MONTH:&lt;/label&gt;
                &lt;select name="OBLIGATION FISCAL MONTH" ng-model="oBLIGATIONFISCALMONTHO" ng-options="z for z in f_month"&gt;
                &lt;/select&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;br&gt;
            &lt;br&gt;
            &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>//script.js start here</p>
  
  <pre><code> var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
    $scope.names = [];
    $scope.years = [];
    $scope.myFunc = function() {
       $scope.names = ["Emil", "Tobias", "Linus"];
    $scope.years = ["2010", "2012", "2017"];
    };
  
  });
  </code></pre>