AngularJS state change using ui-router causing flickering on UI - angularjs

Question

I have a very simple two page app and when navigating from listing page to details page, there is a very distinct flicker caused due to hide/show of the UI components. Attached is a screenshot where you can see both UIs visible at the time of transition (at the top is the details UI and at the bottom is the list UI)!
I am using ui-router for navigation.
function routingConfig($stateProvider, $urlRouterProvider, $locationProvider, applicationPathProvider) {
$stateProvider
.state('activities', {
url: applicationPathProvider.getBase(),
views: {
'': {
templateUrl: '/js/activity/activityList.partial.html',
controller: 'ActivityListController',
controllerAs: 'activityListController',
resolve: {
activitiesResponse: function(activityListService) {
return activityListService.listActivities();
}
},
ncyBreadcrumb: {
parent: '',
label: 'Activity List'
}
}
}
})
.state('activityDetails', {
url : applicationPathProvider.getPath('activityDetails'),
templateUrl : '/js/activity/activityDetails/activityDetails.partial.html',
controller : 'ActivityDetailsController',
controllerAs: 'activityDetailsController',
resolve: {
activityDetailsResponse: function($state, $stateParams, activityListService) {
return activityListService.getTasksForActivity($stateParams.activityId);
}
},
ncyBreadcrumb: {
parent: 'activities',
label : '{{activityDetailsController.selectedActivityText}}'
}
})
;
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise(applicationPathProvider.getBase());
}
Here is the service code which sends a REST call and creates a data structure which controller uses.
function getTasksForActivity(activityId) {
var deferred = $q.defer();
Restangular.one("activities", activityId).customGET("tasks")
.then(function (restangularTasks) {
deferred.resolve(buildValidTasksResponse(restangularTasks.plain()));
}, buildErrorTasksResponse);
return deferred.promise;
}
Here is the code for page 1 (the list page)
<div class="sl-artefact-plans" layout="row" flex>
<div class="sl-artefact-list-container" layout="column" style="width: 100%">
<div class='list_table'>
<div class='list_row' ng-repeat="activity in activityListController.activities | orderBy:sortType:sortReverse">
<div class='list_cell overflow td'>
<a ui-sref="activityDetails({activityId: activity.id})"
ng-click="activityListController.setSelectedActivityInService(activity)">
{{activity.summary}}
</a>
</div>
<div class='list_cell td' ng-bind="activity.dueBy | date:'MM/dd/yyyy h:mm a' : 'UTC'">
</div>
<div class='list_cell td' ng-bind="activity.status">
</div>
</div>
</div>
</div>
</div>
And this is page 2:
<div class="sl_artifact_details_header_bar">
<div class="sl_artifact_details_heading">
{{activityDetailsController.selectedActivityText}}
</div>
<div class="sl_artifact_details_info">
<span ng-class="activityDetailsController.selectedActivityStatus"
style="vertical-align:middle; margin:0px 0px 0px -3px">
{{activityDetailsController.selectedActivity.dueBy | date:'MM/dd/yyyy h:mm a' : 'UTC'}}</span>
<span style="padding-left: 10px">{{activityDetailsController.selectedActivity.status}}</span>
</div>
</div>
<table>
<tr ng-repeat="task in activityDetailsController.tasks">
<td ng-bind="task.summary"></td>
<td ng-bind="task.status"></td>
<td ng-bind="task.dueBy"></td>
</tr>
</table>
This is a very simple use-case and I am quite confused as to why is this occurring and how to resolve this.
Any pointers will help. Thanks.