Example App

Answer to: http://stackoverflow.com/questions/42466291/angular-ui-router-nested-views

by priyaa2002

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div ng-controller="HoursController as vm">

  <form id="aidLocationForm" class="well form-inline">
    <div class="control-group phone-group">
      <label for="phone1" class="col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4 control-label">Primary contact number</label>
      <div class="controls">
        <input type="text" value="" maxlength="3" ng-minlength="3" ng-maxlength="3" class="area-code input-mini aid-primary-phone1-lbl" aria-label="Primary contact number" pattern="/^[0-9]{3}$">
        <input type="text" value="" maxlength="3" ng-minlength="3" ng-maxlength="3" class="area-code input-mini aid-primary-phone2-lbl" aria-label="Primary contact number" pattern="/^[0-9]{3}$">
        <input type="text" value="" maxlength="4" ng-minlength="4" ng-maxlength="4" class="area-code input-mini aid-primary-phone3-lbl" aria-label="Primary contact number" pattern="/^[0-9]{4}$">
      </div>
    </div>
    <div class="control-group">
      <label for="primaryLocationName" class="control-label">Primary Location Name</label>
      <!-- end of label -->
      <div class="controls">
        <input type="text" name="primaryLocationName" id="primaryLocationName" class="aid-primary-location-name-input" required placeholder="Enter the city followed by location" size="50" maxlength="50"
        aria-disabled="true" aria-label="Primary Location Name">
      </div>
    </div>
    <button type="submit" class="btn">Sign in</button>
  </form>
</div>

JavaScript

(function() {
  'use strict';
  angular.module('agencyApp', [])
    .controller('HoursController', HoursController);
		HoursController.$inject = ['$scope'];
		function HoursController ($scope) {}
})();