javascript - Display content on click of navigation menu in angularjs -

my html page contain 2 sections. left side have navigation(code below) , right side display contents respective navigation menu.

on click of each navigation menu, particular section should rendered on content part.

i have done using ng-show/ng-hide setting flag in js file. since setting flags each sections , show/hide , js code file looks odd. know not correct way it.

i new angularjs. kindly me achieve efficiently.

html code: (only navigation part)

<div class="col-md-2"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#home" data-toggle="collapse" data-target="#login">home</a> </li> <div class="collapse" id="login"> <ul class="nav nav-pills nav-stacked"> <li><a class="glyphicon glyphicon-log-in" href="#" ng-click="loginscreen()">login</a></li> <li><a class="glyphicon glyphicon-user" href="#" ng-click="registerscreen()">register</a></li> </ul> </div> <li ><a href="#contact" data-toggle="collapse" data-target="#contact">about</a></li>  <div class="collapse" id="contact"> <ul class="nav nav-pills nav-stacked"> <li><a class="glyphicon glyphicon-save" href="#" ng-click="loaduserdetailsscreen()">loaduserdetails</a></li> <li><a class="glyphicon glyphicon-phone-alt" href="#">contact</a></li> </ul> </div> </ul> </div> 

js code:

var app = angular.module('myapp', []); app.controller('mycontroller', function($scope) {  $scope.flaghomescreen = true; $scope.loaddata=false; $scope.showtable=false; $scope.showstatus=false; $scope.flagloginscreen = false; $scope.registerscreenflag= false;  $scope.menuitems =[10,20,30];  $scope.loginscreen = function(){ $scope.flagloginscreen = true; $scope.flaghomescreen =false; $scope.loaddata=false; $scope.registerscreenflag=false; }; $scope.loaduserdetailsscreen =function(){ $scope.loaddata=true; $scope.flagloginscreen = false; $scope.flaghomescreen =false; $scope.registerscreenflag=false; };  $scope.registerscreen=function(){ $scope.registerscreenflag=true; $scope.loaddata=false; $scope.flagloginscreen = false; $scope.flaghomescreen =false; }; }); 

you can handle navigation in app using ui-router. case need main template includes navigation bar , in each state of app want show different view.

here fiddle shows how can use ui-router handle views. clarity implemented login , user details in example below. can add remaining parts yourself, practice you.

define states such:

var myapp = angular.module('myapp', ['ui.router'])     .config(['$stateprovider', function ($stateprovider) {      $stateprovider.state('home', {         url: "/",         template: '<div ui-view=""/>' // templates of child states fill components ui-view attribute     })     .state('home.userdetails', {         url: "userdetails",         template: '<div>user details</div>',         controller: "userdetailsctrl"     })     .state('home.login', {         url: "login",         //templateurl: "path/to/login.html" // instead of giving inline templates below, can include template html file, , use in state templateurl property         template: '<div>user login</div>',         controller: "loginctrl"     }) }]) 

and can navigate within states using ui-sref instead of using ng-show , ng-click.

<div class="col-md-2"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#home" data-toggle="collapse" data-target="#login">home</a> </li> <div class="collapse" id="login"> <ul class="nav nav-pills nav-stacked"> <li><a class="glyphicon glyphicon-log-in" ui-sref="home.login">login</a></li> <li><a class="glyphicon glyphicon-user" href="#" ng-click="registerscreen()">register</a></li> </ul> </div> <li ><a href="#contact" data-toggle="collapse" data-target="#contact">about</a></li>  <div class="collapse" id="contact"> <ul class="nav nav-pills nav-stacked"> <li><a class="glyphicon glyphicon-save" ui-sref="home.userdetails">loaduserdetails</a></li> <li><a class="glyphicon glyphicon-phone-alt" href="#">contact</a></li> </ul> </div> </ul> </div> <div ui-view=""/> 

don't forget check documentation of ui-router: http://angular-ui.github.io/ui-router/site/#/api

jsfiddle: http://jsfiddle.net/7tzxh/48/