Partial page updates with AngularJS -

i building angularjs application has sidebar , main content area. both populated separate invocations of $http service retrieve json data. stuff in sidebar table of contents , intent clicking on 1 of sidebar items cause main area updated.

my initial stab @ involved putting sidebar , main area 1 partial , associating controller both retrievals. application has route associates controller url, , links in sidebar access these url appropriate parameter cause desired content appear in main area. works, cause whole page refresh. "partial" "total".

what i'd somehow cause click on sidebar links trigger refresh of main content area only. 1 thought somehow split 2 controller/partial pairs , figure out way cause sidebar clicks request update. i'm not sure mechanics of doing this, though. approach keep stuff in 1 controller , use kind of shared state trigger update. attempted setting ng-click directive on links, did not update scope variable, had hoped.

is there recommended way of structuring application achieve kind of ajax-driven partial page update? seems common case, haven't mastered enough of angularjs solution.

this i'm doing:

i have 2 services, 1 sidemenu , other main content. both injected controller.

to handle cross service calls use $broadcast send events.

works , clean code.

additional info on using services based on comment

for sidemenu have shared menu service, way controllers can use same menu.

the maincontent service doesnt have shared, use them because services don't loose data when controller goes out of scope. if didn't controller have use other mechanism repopulate data. me service handles without having code anything

to show different views use following main layout html

<div >     <!-- left menu -->     <div id="left" ng-include src="menu.view" ></div>      <!-- main content -->     <div id="main" ng-include src="maincontent.view"></div> </div> 

the controller

function mycontrollerctrl($scope, $rootscope, menuservice, maincontentservice) {     $scope.menu = menuservice;     $scope.maincontent = maincontentservice } 

the menu service

app.factory('menuservice', ['$rootscope', function ($rootscope) {     var service = {         view: 'leftmenuview.html',          menuitemclicked: function (data) {             $rootscope.$broadcast('menuitemclicked', data);         }     };     return service; }]); 

the main content service

app.factory('maincontentservice', ['$rootscope', function ($rootscope) {     var service = {         view: 'maincontentview.html',          menuitemclicked: function(data){           //handle updating of model based on data here         }     };      $rootscope.$on('menuitemclicked', function (event, data) { service.menuitemclicked(data) });      return service; }]);