how to add Custom Data to each State Objects Dynamically - angularjs

Question

In the below example i have custom data like data:{roles:[]} like this i need to add custom data properties dynamically like data:{user:[]} for each state
.state('WorkArea', {
parent: 'site',
url: '/WorkArea',
data: {
roles: ['User', 'Dev']
},
})

Answer 1

Define it in this way:
.state('WorkArea', {
parent: 'site',
url: '/WorkArea',
data: {
roles: (function() {
return ['User', 'Dev'];
})()
},
})
You can use IIFE for this case to dynamically add properties to data attribute.
In your app.run use:
$rootScope.$on('$stateChangeStart', function(event, toState){
var roles = toState.data.roles ;
console.log(roles);
// your custom logic here for that state
})

Answer 2

Copied from: https://github.com/angular-ui/ui-router/wiki
You can attach custom data to the state object (we recommend using a data property to avoid conflicts).
// Example shows an object-based state and a string-based state
var contacts = {
name: 'contacts',
templateUrl: 'contacts.html',
data: {
customData1: 5,
customData2: "blue"
}
}
$stateProvider
.state(contacts)
.state('contacts.list', {
templateUrl: 'contacts.list.html',
data: {
customData1: 44,
customData2: "red"
}
})
With the above example states you could access the data like this:
function Ctrl($state){
console.log($state.current.data.customData1) // outputs 5;
console.log($state.current.data.customData2) // outputs "blue";
}