(function() {

  var app = angular.module('myStateApp', [
    'ngRoute'
  ]);

  app.config(function($routeProvider) {
    $routeProvider.when('/page', {
      templateUrl: 'page.tpl.html',
      controller: 'PageCtrl'
    });
  });
  
  app.controller('PageCtrl', function($scope) {
    console.log('PageCtrl');
  });

})();
<!DOCTYPE html>
<html ng-app="myStateApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link href="style.css" rel="stylesheet" />
</head>

<body>

  <a ng-href="#page">Load page</a>

  <br />
  <br />
  name-in-body: <input id="name-in-body" name="name"></input>

  <div ng-view>
  </div>

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script data-semver="1.2.28" src="https://code.angularjs.org/1.2.28/angular.js" data-require="angular.js@1.2.x"></script>
  <script src="//code.angularjs.org/1.2.28/angular-route.min.js"></script>

  <script src="app.js"></script>

</body>

</html>
/* Put your css in here */

<h1>
  <p class="bg-success">Inside the "page.tpl.html"</p>
</h1>

name-in-tpl: <input id="name-in-tpl" name="name"></input>

<script src="custom-function.js"></script>
$(document).ready(function() {

  alert($('#name-in-body')[0].id);
  $('#name-in-body').css('color', 'yellow')
    .css('background-color', '#222266')
    .val('Enter your name');

  alert($('#name-in-tpl')[0].id);
  $('#name-in-tpl').css('color', 'red')
    .css('background-color', '#FDFDFD')
    .val('Enter your name');
  $('#name-in-tpl').bind('focus', function() {
    $(this).css('color', '#000').val("Focused!")
  }).bind('blur', function() {
    $(this).css('color', 'red').val("Blurred!")
  });

});