Separate nav from ng-view

Question

I'm brand new to Angularjs and am trying to set up a new site but I'm confused as to the set up. I have a module and am using $route to successfully navigate but I'm lost as to what to do with my nav. When I load the module I want to read my database for a list of links that the user is allowed to access then spit them out in the nav. I don't want to repeat this in every view because I don't need to. So I'm trying to figure out how to run the ajax call once and then keep changing the view (I'd also like to add a class .selected to whatever view they're on). How would I go about doing that, with a directive?

(function () {
    var app = angular.module('manage', ['ngRoute', 'manageControllers']);

    /*
    I've tried this but obviously $http isn't injected. Can I even do that?
    var thisApp = this;

    $http.get('/test/angular/php/angular.php', {params: {'function': 'nav'}}).then(function successCallback(response) {

    });
    */


    app.config(['$routeProvider',
        function($routeProvider) {
            $routeProvider.
                when('/', {
                    templateUrl: 'templates/dash.html',
                    controller: 'DashCtrl'
                }).
                when('/inventory/', {
                    templateUrl: 'templates/inventory.html',
                    controller: 'InventoryCtrl'
                }).
                when('/inventory/:mvKey', {
                    templateUrl: 'templates/inventory.html',
                    controller: 'InventoryCtrl'
                }).
                when('/inventory/:mvKey/:tab', {
                    templateUrl: 'templates/inventory.html',
                    controller: 'InventoryCtrl'
                }).
                /* etc...*/
        }
    ]);
})();

EDIT:

My attempt at getting the nav to run once

controllers.js

var manageControllers = angular.module('manageControllers', []);

var thisApp = this;
nav = null;
navSelected = '/';

manageControllers.controller('NavCtrl', ['$scope', '$http', function($scope, $http) {
    if (thisApp.nav === null) {
        $http.get('php/angular.php', {params: {'function': 'nav'}}).then(function successCallback(response) {
            console.log(response.data);
            thisApp.nav = response.data;
            $scope.nav = thisApp.nav;
            $scope.select = thisApp.navSelected;
        });
    } else {
        $scope.nav = thisApp.nav;
        $scope.select = thisApp.navSelected;
    }
}]);

manageControllers.controller('DashCtrl', ['$scope', function($scope) {
    thisApp.navSelected = '/';
}]);

Answer 1

I would swith to UI Router (https://github.com/angular-ui/ui-router) instead of $route. It allows you being much more flexible with your routing.

A Small example:

app.config(['$stateProvider',
        function($stateProvider) {
            $stateProvider.
                state('/', {
                    url: '/',
                    views: {
                        '': {
                            templateUrl: 'templates/dash.html',
                            controller: 'DashCtrl'
                        },
                        'nav@': {
                            templateUrl: 'path/to/nav.html',
                            controller: 'NavCtrl'
                        },
                    }
                }).
                state('/inventory/', {
                    url: '/',
                    views: {
                        '': {
                            templateUrl: 'templates/dash.html',
                            controller: 'DashCtrl'
                        },
                        'nav@': {
                            templateUrl: 'path/to/nav.html',
                            controller: 'NavCtrl'
                        },
                    }
                }).
                // ...

and in your index.html

<div ui-view="nav"></div>
<div ui-view ></div>   

Take a closer look at UI Router's doc, there's much more you can do with it!