JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.0/angular-ui-router.js"></script>
<div ng-repeat="sp in obj.PEs">

        <div ui-sref="{{sp.peType}}( { peId:sp.peId } )">{{sp.peType}}</div>
</div> 

<div style="border:1px;" ui-view="properties">

</div>

JavaScript

var myApp = angular.module('myApp',["ui.router"]);
   myApp.controller("testCtrl", function($scope){
      $scope.obj = {
        "PEs": {
            "1": {
                "peId": "1",
                "peName": "Exp1",
                "peDisplayName": "Exp",
                "peType": "Exp",
                "peCategory": "PE"
            },
            "2": {
                "peId": "2",
                "peName": "RN1",
                "peDisplayName": "RNull",
                "peType": "RN",
                "peCategory": "PE"
            }
        }
     }
    })
    
    myApp.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
        .state('Exp', {
            url: '/Exp/:peId',
            views :{
                "properties" : {
                    template:".<h3>I am Exp ! </h3>",
                    controller : function($scope,$stateParams){
                        var peId = $stateParams.peId;
                        alert("Peid-> "+angular.toJson( $scope.obj.PEs[peId]) );
                       
                    }
                }
            }
        })
        .state('RN', {
            url: '/RN/:peId',
            views :{
                "properties" : {
                    template:"<h3> I am RN ! </h3>",
                    controller : function($scope,$stateParams){
                        var peId = $stateParams.peId;
                        alert("Peid-> "+angular.toJson( $scope.obj.PEs[peId]) );
                    }
                }
            }
        })
     });