JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
<div ng-app="app">
    <a ui-sref="validate.lock-as-admin">Admin</a>
    <a ui-sref="validate.lock-as-clerk">clerk</a>
    <div ui-view></div>
</div>

JavaScript

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

module.factory("hasPermissions", [function() {
    var get = function(permission) {
        return permission === "admin";
    };
    return {
        get: get
    };
}]);


module.config(['$stateProvider', function($stateProvider) {
    $stateProvider
        .state('validate', {
            url: '/validate',
            abstract: true,
            template: '<div ui-view></div>'
        })
        .state('validate.lock-as-admin', {
            template: '<h1>lock as admin</h1>',
            permission: 'admin',
            otherwise: 'validate.lock-as-clert'
        })
        .state('validate.lock-as-clerk', {
            template: '<h1>lock as clerk</h1>',
            permission: 'clerk',
            otherwise: 'validate.lock-as-admin'
        })
        .state('validate.commit', {
            template: '<h1>commit</h1>'
        });
}]);

module.run(function($rootScope, $state, hasPermissions) {
  $rootScope.$on('$stateChangeStart', function(e, to) {
    var permission = to.permission;
      if(!permission) {return }
    var allowed = hasPermissions.get(permission);

    if (!allowed) {
      e.preventDefault();
      $state.go(to.otherwise);
    }
  });
});