ui-router state reverts to parent, and ui-view is

Question

I'm implementing tabs in AngularJS, using ui-router. The problem is once I click on any of the links that are created, the state momentarily changes (as seen in the url) as well as ui-view is populated for a brief moment, then disappears. There are no styles associated with ui-view. Any ideas...?

The issue is in clicking a link on the ReportParent view (the parent).

Controller:

function ReportParentController($scope, $http, $q, $interval, ReportParentService, $stateParams, $state) {
    var vm = this;
    vm.dataArray = [];
    vm.CustomerID = $stateParams.CustomerID;

    vm.TabList = [];    

    ReportParentService.getReportList(vm.CustomerID).then(function (response) {
        vm.TabData = response;        
        updateUrlValue(vm.TabData);
        createTabList(vm.TabData);
    });

    function updateUrlValue(data) {
        for (CurrentTabItem = 0; CurrentTabItem < data.length; CurrentTabItem++) {
            data[CurrentTabItem].Url = "details.reportParent." + data[CurrentTabItem].NameNoSpaces + "Report";
        }
    }

    function createTabList(data) {
        for (CurrentTabItem = 0; CurrentTabItem < data.length; CurrentTabItem++) {
            vm.TabList.push({ id: CurrentTabItem, Name: data[CurrentTabItem].Name, NameNoSpaces: data[CurrentTabItem].NameNoSpaces, Url: data[CurrentTabItem].Url });
        }

    }
}

View:

 <div class="project-tab-menu ui right secondary menu" style="margin-right:1em;">        
        <a ng-repeat="Tab in vm.TabData" ui-sref={{Tab.Url}}>{{Tab.Name}}</a>
    </div>

    <div ui-view ></div>   

Routing:

 .state('details.reportParent.WindowsServerReport', {
        url: '/windowsServerReport',
        views: {
            '@details.reportParent': {
                templateUrl: 'Routing/WindowsServerReport',
                controller: 'WindowsServerReportController',
                controllerAs: 'vm',                    
            },
        },
    })
    .state('details.reportParent', {
        url: '/reportParent',
        templateUrl: 'Routing/ResultReportParent',
        controller: 'ReportParentController',
        controllerAs: 'vm'
    });`

Answer 1

Turns out it's necessary to point to a ui-view on the parent, and using a url messes this up. Replace the details.reportParent route with the following

.state('details.reportParent', {
        views: {
            'resultsTab@details': {
                templateUrl: 'Routing/ResultReportParent',
                controller: 'ReportParentController',
                controllerAs: 'vm'
            },
        },
    });

Also make sure that in the parent view, you're putting data into a ui-view in this case <div ui-view ='resultsTab'></div>