angularjs - Angular ng-include is not working -

angularjs - Angular ng-include is not working -

i have trying utilize ng-include create partial layouts pop-up's in web app. however, reason not see html getting rendered when execute include. here html after overlay service adds nginclude

<div id="cover" class="" ng-include="'/angular/views/gears.html'"></div>

and resides within of ng-app , ng-controller, cannot figure out why view, /angular/views/gears.html not showing correctly?

i made sure going /angular/views/gears.html in browser in fact serve right html. does

edit

i realized placing above html straight page renders right html, however, trying add together include dynamically using service, think not rendering ng-include correctly

my overlay service

app.factory('overlayservice', [function () { var overlay = {}; var _cover; var _innercontent; jquery(document).ready(function () { _cover = jquery(document.createelement('div')).attr({ 'id': 'cover', 'ng-include' :''}).prependto(jquery('#maincontent')); }); overlay.show = function (templateurl) { jquery(_cover).addclass('show'); jquery('html,body').bind('mousewheel dommousescroll', function (event) { event.preventdefault(); }); //_cover.attr('ng-include', "'/angular/views/"+templateurl+"'"); overlay.url = templateurl; homecoming _cover; } overlay.destroy = function () { jquery('html,body').unbind('mousewheel dommousescroll'); jquery(_cover).removeclass('show'); } homecoming overlay; }]);

instead of dynamically attaching ng-include directive element, attach directive div straight in markup , show/hide ng-if:

<div ng-if="myservice.someboolcheck('cover')" ng-include="'/angular/views/gears.html'"></div>

alternatively, create element within overlayservice , append dom angular's built-in $document service. i'm assuming there 1 , 1 overlay element used in application , controlled solely overlay service.

angularjs