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>
<div ng-controller="HoursController as vm">
  <h5>Hours Of Operation</h5>
  <div class="container-fluid" id="hrs-of-op">
    <div class="row">
      <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 col-xl-9 hrs-op-wrap">
        <div ng-repeat="list in vm.weekdays">
          <div class="control-group" id="from-to">
            <div class="controls">

              <div class="col-xs-6 col-sm-12 col-md-2 col-lg-2 col-xl-2 radio-days">
                <label class="radio inline aid-radio-days-lbl radio-days" for="aid-radio-{{list.Day}}">
                  {{list.Day}}
                  <input type="radio" class="radio-days" name="{{list.Day}}" id="aid-radio-{{list.Day}}" ng-value="false" ng-model="vm.closed[$index]">
                </label>
              </div>

              <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 select-time">
                <time-picker ng-model="vm.weekdays[$index].fromTime" id="aid-from-{{$index}}" name="fromTime"></time-picker>
                <span>&nbsp;To &nbsp;</span>
                <time-picker ng-model="vm.weekdays[$index].toTime" id="aid-to-{{$index}}" name="to"></time-picker>
              </div>

              <div class="hidden-xs col-sm-12 col-md-1 col-lg-1 col-xl-1 radio-closed">
                <label class="radio inline aid-radio-days-lbl" for="aid-radio-closed-{{list.Day}}">
                  <input type="radio" name="{{list.Day}}" id="aid-radio-closed-{{list.Day}}" ng-value="true" ng-model="vm.closed[$index]" ng-change="vm.setClosed($index)"> Closed
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="hidden-xs col-sm-3...

SCSS

/*** NG-VIEW Animation ******************************/

.body {margin:25px;color:black;}
.body a {color:black;}
.mainTemplate {background-color:hotpink;}
.fullscreenTemplate {background-color:darkorange;}

section {
  display: flex;
  > div {
    padding: 5px;
    border: 1px solid black;
  }
}

.view-fade-in.ng-enter {
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  position: relative;
  opacity: 0;
}
.view-fade-in.ng-enter.ng-enter-active {
  opacity: 1;
}
.view-fade-in.ng-leave.ng-leave-active {
  opacity: 1;
}
.view-fade-in.ng-leave {
  opacity: 0;
}

JavaScript

(function() {
  'use strict';
  angular.module('agencyApp', [])
    .controller('HoursController', HoursController)
    .directive('timePicker', timePicker);

  function HoursController() {
    var vm = this;

    vm.print = function() {
      console.log(vm);
    };
    vm.setClosed = setClosed;
    vm.setAllWeekdayClosed = setAllWeekdayClosed;
    vm.weekdays = [{
      Day: 'Monday',
      fromTime: "Select",
      toTime: "Select"
    }, {
      Day: 'Tuesday',
      fromTime: "Select",
      toTime: "Select"
    }, {
      Day: 'Wednesday',
      fromTime: "Select",
      toTime: "Select"
    }, {
      Day: 'Thursday',
      fromTime: "Select",
      toTime: "Select"
    }, {
      Day: 'Friday',
      fromTime: "Select",
      toTime: "Select"
    }, {
      Day: 'Saturday',
      fromTime: "closed",
      toTime: "closed"
    }, {
      Day: 'Sunday',
      fromTime: "closed",
      toTime: "closed"
    }];

    vm.closed = [
      false, false, false, false, false, true, true
    ];

    function setClosed(index) {
      if (vm.closed[index]) {
        vm.weekdays[index].toTime = vm.weekdays[index].fromTime = 'closed';
      }
      if (!vm.closed[index]) {
        vm.weekdays[index].fromTime = 'Select';
        vm.weekdays[index].toTime = 'Select';
      }
    };

    function setAllWeekdayClosed(index) {
      if (vm.closed[index]) {
        vm.weekdays[index].toTime = vm.weekdays[index].fromTime = 'closed';
      }
      if (!vm.closed[index]) {
        vm.weekdays[index].fromTime = '7:00 am';
        vm.weekdays[index].toTime = '3:00 pm';
      }
    };

  }

  function timePicker() {
    var ddo = {
      template: '<select class="input-small" ng-options="time as time for time in timings"></select>',
      restrict: 'E',
      require: 'ngModel',
      replace: true,
      compile: compileFn
    };
    return ddo;

    function compileFn(tElement, tAttrs) {
      tElement.attr('ng-model', tAttrs.ngModel);
      //tElement.attr('ng-disabled',...