Angular how to get ID of element for controller instance

Question

I have an angular app that may have multiple pages open that use the same controller. I need to be able to reference DOM elements that are specific to one instance of the controller. For example:

<div id="instanceOne" ng-controller="tradeViewController">
   <div class='tradeHeader'/>
   <div class='tradePriceCurve'/>
   <div class='trendAnalysisGraph'/>
</div>
//Then on a separate page
<div id="instanceTwo" ng-controller="tradeViewController">
   <div class='tradeHeader'/>
   <div class='tradePriceCurve'/>
   <div class='trendAnalysisGraph'/>
</div>

Within my controller, I'm setting up some custom UI elements with data tied to the scope of the controller, and the data is changing from an asynchronous data feed coming in. If I have two instances of this page up, and I receive an async update, how do I apply that update ONLY to the instance it belongs to? (i.e. If I was hard coding it, it would be

$("#instanceOne .tradeHeader .tradeDate").html(newVal);

The problem is I don't know which DOM ID a particular controller instance is tied to (i.e. "#instanceOne" or "#instanceTwo")

Thanks

Answer 1

You're approaching the problem in a way which isn't "angular". Try to avoid putting any DOM manipulation code (jQuery included) in your controllers.

It appears that you want to implement an angular directive to manipulate your DOM elements.

Anyway, if you're really set on continuing down this road you can obtain the element which a controller is attached to by adding "$element" to the list of injectables required by the controller:

myModule.controller("myController", ["$element", function($element) ...