Loading angular js internal routes and controllers

Question

I have an issue with the routes and controller. If I have a route like below this->

.state('dashboard/profile', { url: '/dashboard/profile', parent: 'common', //templateUrl: '/app/dashboard/dashboard.html', template: '<div><h4>dashboard/profile</h4></div>', controller: 'ProfileCtrl' })
Now as I will be having many routes,I want to load all the routes inside dashboard only after the user reaches dashboard.html page.If I follow as above I will have to load all the routes even when not needed.For example: The above profile URL will be only hit once user is authenticated and authorized for dashboard and only then the user will reach dashboard,but I will have to load the routes controllers here which are not needed.
I want the internal routes for dashboard to be separated and called only when dashboard is visited by user. How can I avoid loading unnecessary controllers and routes?