title: AngularJS - Correct way to share data between two controllers
body: <p>I'd like some advice on how to share some data between two or more controllers in AngularJS.</p>
  
  <p>For now I'm just dealing with two controllers, but in the future I will have more controllers that will also want to use this same data. Right now I have a <code>navigation-controller</code> which is controlling the <code>side navigation</code> and the <code>header</code>. And for ease of understanding, let's say the second controller is called <code>content-controller</code> which is responsible for dealing with all the content.</p>
  
  <p>I want to dynamically load the content based on whatever the user searches for and the search bar is in the side navigation, so this <code>searchTerm</code> needs to be accessible by both controllers. In the future, I would also implement some other features which would probably need to access this searchTerm as well.</p>
  
  <p>In terms of the HTML structure, the <code>content-controller</code> is inside the <code>navigation-controller</code>.</p>
  
  <p>My first thought was to make <code>searchTerm</code> globally available by sticking it in <code>$rootScope</code>, but I'm unsure if this is an efficient/secure way to do it. </p>
  
  <p>My second thought was to take the searching aspects and put them into a <code>service</code>. Inside this service I would put functions which would speak to the API in order to get the necessary data. This would mean on the search bar, I can make the <code>submit search</code> button access the <code>service</code> and run something like <code>FooService.update(searchTerm)</code>.</p>
  
  <p>What do you think the best way to deal with this scenario is? </p>