issue with ng-repeat after using controllerAs

Question

I had this script working earlier when the user clicks on a table item, it displays a second view beneath it with the relevant data.

I've now included controllerAs in my state configuration in my app.js and for some reason the second view won't load into ui-view. In the console you can see the elements have loaded but with no content.

Data sent from the view(list-patents), through the select method, is accessible to the controller for patent-item.htm through app.run using the $rootScope object.

Any ideas why the second view isn't being populated with content now I've used controllerAs?

List of related documents:

• app.js - makes the call to backend
• list-patents.htm - loads patent-item.htm into the ui-view, depending on the value passed from the function select
• patent-item.htm - displays related data from the model

app.js

var app = angular.module('myApp', ['ngRoute','ui.router']);

app.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function($stateProvider, $locationProvider, $urlRouterProvider ) {

     $stateProvider
    .state("patents.list", {
        url: "/list-patents",
        templateUrl: "templates/patents/list/list-patents.htm",
        controller: "patentCtrl",
        controllerAs: "ctrl"
    })

    .state("patents.list.item", {
        url: "/patent-item",
        templateUrl: "templates/patents/list/patent-item.htm",
        params: {
          patentApplicationNumber: null,
           //futher list of parameters
        },
        controller: "patentCtrl"
    })
}]);

app.run(function($rootScope) {
    $rootScope.select = function(item) { 
        $rootScope.patentItem = []; 
        $rootScope.patentItem.push(item); 
    }
})

app.controller('patentCtrl', ['$scope', '$http', 'loadPatents', '$stateParams', 'patentService', 'patentTabFactory', function($scope, $http, loadPatents, $stateParams, patentService, patentTabFactory) {

    var vm = this;

    vm.patent={id:null, patentApplicationNumber:'', clientRef: '', renewalStatus: '', currentRenewalCost: '', costBandEndDate:'', renewalCostNextStage:'', renewalDueDate:''};
    vm.patents=[];

    vm.fetchAllPatents = function(){
        loadPatents.fetchAllPatents()
            .then(
            function(d) {
                vm.patents = d;
                console.log(vm.patents)
            },
            function(errResponse){
                console.error('Error while fetching Users');
            }
        );

       vm.selectedPatent = $scope.patentItem;

}]);

list-patents.htm

<div>
    <table>
        <thead>
            <tr>
                <td class="align-middle">Application No. </td>
                <td class="align-middle">Client Ref</td>
                <td class="align-middle">Cost now</td>
                <td class="align-middle">Cost band end</td>
                <td class="align-middle">Cost next</td>
                <td class="align-middle">Renewal Date</td>
                <td class="align-middle">Remove</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="x in ctrl.patents">
                <td ng-click="select(x)"><a ui-sref="patents.list.item({id: patentApplicationNumber: x.patentApplicationNumber, //list of further parameters (as seen in <thead>})">{{x.applicationNumber}}</a></td>
                <td ng-bind="x.clientRef"></td>
                <td ng-bind="x.currentRenewalCost">$</td>
                <td ng-bind="x.costBandEndDate"></td>
                <td ng-bind="x.renewalCostNextStage"></td>
                <td ng-bind="x.renewalDueDate"></td>
                <td><button type="button" class="btn btn-danger" ng-click="remove(x.id)">Remove</button></td>
            </tr>
        </tbody>
    </table>
    <div ui-view></div>     
</div>

patent-item.htm

<div>
    <script type="text/ng-template" id="patent-info.htm">
        <table>
            <tbody>
                <thead>
                    <tr>
                        <td>applicationNumber</td>
                        <td>clientRef</td>
                        <td>renewalStatus</td>
                        <td>costBandEndDate</td>
                        <td>renewalCostNextStage</td>
                        <td>renewalDueDate</td>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="x in selectedPatent track by $index">
                        <td>{{x.patentApplicationNumber}}</td>
                        <td>{{x.clientRef}}</td>
                        <td>{{x.renewalStatus}}</td>
                        <td>{{x.costBandEndDate}}</td>
                        <td>{{x.renewalCostNextStage}}</td>
                        <td>{{x.renewalDueDate}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </script>
    <script type="text/ng-template" id="cost-analysis.htm">
        //content
    </script>
    <script type="text/ng-template" id="renewal-history.htm">
        //content
    </script>