I have two templates that populate ng-view, but they don't inherit the document css. Is there a way to get the css to work? I am using this in a jquery mobile page and want the repeat list to have jquery mobile ui.
ng-view simply attaches the HTML to the current DOM; CSS applied to the page will affect it correctly. More likely, jQuery Mobile UI does some JavaScript magic that's not happening when the HTML is added.
For instance, a glance through the documentation on Listviews brings up the following method:
refresh- update the listviewIf you manipulate a listview via JavaScript (e.g. add new LI elements), you must call the refresh method on it to update the visual styling.
$('.selector').listview('refresh');
There's also a section at the bottom of "List basics & API":
Updating lists
If you add items to a listview, you'll need to call the refresh() method on it to update the styles and create any nested lists that are added. For example:
$('#mylist').listview('refresh');Note that the
refresh()method only affects new nodes appended to a list. This is done for performance reasons. Any list items already enhanced will be ignored by the refresh process. This means that if you change the contents or attributes on an already enhanced list item, these won't be reflected. If you want a list item to be updated, replace it with fresh markup before calling refresh.
ng-view has a $viewContentLoaded event that is emitted when the ng-view content is reloaded. Try having a controller or directive scope (or even rootScope) listen for that event and reapply/refresh as @Brandon mentions.
See also Jquery calls not working in $viewContentLoaded of Angular and
angular.js: equivalent of domReady - maybe you can just call the reapply/refresh stuff at the bottom of each main controller in your view (no need for $viewContentLoaded here).