Route to component (1) https://ui-router.github.io/guide/ng1/route-to-component

<!DOCTYPE html>
<html>

  <head>
    <script src="//unpkg.com/angular@1.6.1/angular.js"></script>
    <script src="//unpkg.com/angular-ui-router@1.0.0-rc.1/release/angular-ui-router.js"></script>
    <script src="script.js"></script>
    <style>
      a.deactivated {
        color: lightgrey;
      }
      li.userselected {
        font-weight: bolder;
      }
    </style>
  </head>

  <body ng-app="app">
    <ui-view></ui-view>
  </body>

</html>

"use babel";
let app = angular.module('app', ['ui.router']);

app.config(function($stateProvider, $urlServiceProvider) {
  $urlServiceProvider.rules.otherwise({ state: 'userlist' });
  
  $stateProvider.state('userlist', {
    url: '/users',
    templateUrl: './partials/users.html',
    controller: 'UsersController',
    resolve: {
      users: function(UserService) {
        return UserService.list();
      }
    }
  });
    
  $stateProvider.state('userlist.detail', {
    url: '/:userId',
    templateUrl: './partials/userDetail.html',
    controller: 'UserDetailController',
    resolve: {
      user: function($transition$, users) {
        return users.find(user => user.id == $transition$.params().userId);
      }
    }
  });

});

app.controller('UsersController', function($scope, users) {
  $scope.users = users;
  $scope.clickHandler = function() {
    alert('something');
  }
})

app.controller('UserDetailController', function($scope, user) {
  $scope.user = user;
})


app.service('UserService', function($http) { 
  var service = {
    list: function() {
      return $http.get('./data/users.json', { cache: true }).then(resp => resp.data)
    },
    get: function(id) {
      return service.list().then(list => list.find(item => item.id === id));
    }
  };
  
  return service;
});

// preload resources in case plunker times out
app.run(function($http, $templateRequest) {
  $http.get('data/users.json', { cache: true });
  $templateRequest('partials/users.html');
  $templateRequest('partials/userDetail.html');
})

[
  {
    "address": "228 Vandervoort Avenue, Valmy, New Jersey, 4440",
    "active": true,
    "phone": "+1 (933) 526-2295",
    "email": "undefined.undefined@buzzworks.ca",
    "company": "BUZZWORKS",
    "name": "Katherine Kennedy",
    "eyeColor": "brown",
    "age": 22,
    "id": 709
  },
  {
    "address": "157 Crawford Avenue, Vernon, Virgin Islands, 8555",
    "active": true,
    "phone": "+1 (905) 406-2385",
    "email": "undefined.undefined@jamnation.org",
    "company": "JAMNATION",
    "name": "Eugenia Ward",
    "eyeColor": "brown",
    "age": 37,
    "id": 182
  },
  {
    "address": "874 Elizabeth Place, Craig, New Mexico, 6187",
    "active": true,
    "phone": "+1 (812) 521-3909",
    "email": "undefined.undefined@grainspot.biz",
    "company": "GRAINSPOT",
    "name": "Myers Love",
    "eyeColor": "green",
    "age": 21,
    "id": 790
  },
  {
    "address": "307 Hoyt Street, Glidden, Vermont, 6260",
    "active": true,
    "phone": "+1 (876) 593-2605",
    "email": "undefined.undefined@applica.me",
    "company": "APPLICA",
    "name": "Ida Decker",
    "eyeColor": "brown",
    "age": 40,
    "id": 336
  },
  {
    "address": "139 Dooley Street, Darbydale, Texas, 9146",
    "active": true,
    "phone": "+1 (986) 407-3771",
    "email": "undefined.undefined@concility.us",
    "company": "CONCILITY",
    "name": "Castaneda Rice",
    "eyeColor": "brown",
    "age": 32,
    "id": 213
  }
]

<h1>Users</h1>

<button ng-click="clickHandler()">Do something</button>

<ul>
  <li ng-repeat="user in users" ui-sref-active="userselected">
    <a ui-sref="userlist.detail({ userId: user.id })" 
        ng-disabled="!user.active"
        ng-class="{ deactivated: !user.active }">
      {{ user.name }}
    </a>
    
    <button ng-click="user.active = !user.active">
      {{ user.active ? "Deactivate" : "Activate" }}
    </button>
  </li>
</ul>

<div ui-view></div>

<h3>User {{ user.id }}</h3>

<h2>{{ user.name }} {{ !user.active ? "(Deactivated)" : "" }}</h2>

<table>
  <tr><td>Address</td><td>{{ user.address }}</td></tr>
  <tr><td>Phone</td><td>{{ user.phone }}</td></tr>
  <tr><td>Email</td><td>{{ user.email }}</td></tr>
  <tr><td>Company</td><td>{{ user.company }}</td></tr>
  <tr><td>Age</td><td>{{ user.age }}</td></tr>
</table>