How to include one partial into other without creating a new scope?
angularjs
Solution
You can actually do this without using a shared service. $scope.$emit(...) can dispatch events to the $rootScope, which can listen for them and rebroadcast to the child scopes.
Demo: http://jsfiddle.net/VxafF/
Reference: http://www.youtube.com/watch?v=1OALSkJGsRw (see the first comment)
Problem
I've this routes. ``` // index.html <div ng-controller="mainCtrl"> <a href='#/one'>One</a> <a href='#/two'>Two</a> </div> <div ng-view></div> ``` And this is how I'm loading the partials into my `ng-view`. ``` // app.js var App = angular.module('app', []); App.config(['$routeProvider', function($routeProvider) { $routeProvider.when('/one', {template: 'partials/one.html', controller: App.oneCtrl}); $routeProvider.when('/two', {template: 'partials/two.html', controller: App.twoCtrl}); }]); ``` When I click the links, it shows me the appropriate markup inside the ng-view. But when I try to include `partials/two.html` inside `partials/one.html` using `ng-include`, it shows it properly but creates a different scope so I'm not able to interact with it. ``` // partials/two.html - markup <div ng-controller="twoCtrl">I'm a heading of Two</div> // partials/one.html - markup <div ng-controller="oneCtrl">I'm a heading of One</div> <div ng-include src="'partials/two.html'"></div> ``` How do I resolve this problem? Or Is there any other way to achieve the same result?