How to get information from custom directive in angularjs before the view is shown to the user?

I am passing information using $state->data
For example:

angular
     .module('myapp', [...])
     .config(function ($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/account');

        $stateProvider
            .state('account', {
                abstract: true,
                url: '/account',
                templateUrl: 'index.html'
            })
            .state('menu', {
                abstract: true,
                url: '/menu',
                templateUrl: 'views/nav/menu.html'
            })
            .state('menu.main', {
                url: '/main',
                data: {
                    role: ['user', 'merchant'],
                    mode: 'online'
                },
                views: {
                    'menuContent': {
                        templateUrl: 'views/dash/dash.main.html'
                    }
                }
            })
            .
            .
            .           
        ;
    })  

And validate each view through $stateChangeStart

$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
    console.log(toState);
    console.log(toState.data);
});    

But I think the information (like role and mode) must be taken from the view and not from the $state->data. What I want is something like this:

views/dash/dash.main.html

<ion-view title="Dashboard" hide-back-button="true" myapp-role="user,merchant" myapp-mode="online" myapp-security="true">
    <ion-content has-header="true" padding="false">

    </ion-content>
</ion-view>

And be able to get myapp-role, myapp-mode, myapp-security values before the view is shown to the user. How can I achieve this? And another question, is this a good approach?