Sample Layout of a TS controller with additional inheritance

controller.ts

interface IStateInherit extends ng.ui.IStateService {
    $current: IResolvedStateInherit;
}

interface IResolvedStateInherit extends ng.ui.IResolvedState {
    data: IUrlDataContainer;
}

interface IUrlDataContainer {
    title: string;
    tabIndex: number;
}

class TabListItem {
    tabIndex: number;
    title: string;
    state: string;
}

class LayoutsController {
    title: string;
    showProfile: boolean;
    selectedIndex: number;
    $scope: angular.IScope;
    $log: ng.ILogService;
    $location: any;
    tabs: Array<TabListItem>;

    constructor($log, $location, $rootScope, $timeout, $scope, $state: IStateInherit) {
        var layouts = this;
        layouts.title = 'Layout Page';
        layouts.showProfile = false;
        layouts.selectedIndex = $state.$current.data.tabIndex;

        layouts.tabs = [
            { tabIndex: 0, title: 'One', state: 'examples.layouts.one' },
            { tabIndex: 1, title: 'Two', state: 'examples.layouts.two' },
            { tabIndex: 2, title: 'Three', state: 'examples.layouts.three' },
            { tabIndex: 3, title: 'Dashboard', state: 'examples.layouts.four' }
        ];

        $scope.$watch('layouts.selectedIndex', (newValue, oldValue, $scope) => {

            var selectedTab = layouts.tabs.filter((x => x.tabIndex === newValue))[0];
            console.log('++ Slected Tab ++', selectedTab);
            if (selectedTab !== undefined && newValue !== oldValue) {
                $state.go(selectedTab.state);
            }
            
        });

        $scope.$on('$stateChangeSuccess', function (event, current, params) {
            $timeout(function () {
                layouts.selectedIndex = current.data.tabIndex;
                $scope.$apply();
            }, 10);

        });
    }
}
angular.module('app.layouts').controller('layoutsController', LayoutsController);