Angular.js: how can you load a remote html file, and populate one of it's elements with model's data?

Hi…I have global ng-app declared on the HTML tag level. There’s a static element, that get’s handled by specific ng-controller. Now, at some point of page usage flow, a widget gets loaded into the DOM. Widget lands outside the ng-controller element. Question: how can I populate that widget with data from angular js model and keep it in sync?

Using this simple code doesn’t work:

<select ng-model="files" ng-options="f.name for f in files">
    <option value="">Select File</option>
</select>

Worth saying, that the widget is only a part of a large amount of content (i.e. page) that gets loaded dynamically, which is why I’m trying to avoid declaring a controller for each of ‘pages’, as it looks to be an overkill.