Example App

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

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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.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" min="vm.weekdays[$index].fromTime"></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
               ...

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)
		.filter('timeFilter', function() {
      return function(input, filterCriteria) {
      if(filterCriteria && filterCriteria!=="Select"){
        input = input || [];
        if (filterCriteria === 'closed') {
          return ['closed'];
        }
        var out = [];
        input.forEach(function(time){
          if(moment(time, 'h:mm a').isAfter(moment(filterCriteria, 'h:mm a'))){
            out.push(time);
          }
        });
        return out;
        }else {
        	return input;
        }
    };
})
  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...