angularjs - While doing ng-include, how can I insert html into included view? -

baseview.html

<div id='baseviewconent'>     <span>some content</span>     <div id='somewhere'></div>     <span>some other content</span> </div> 

someview.html

<div id='someviewcontent'>     <button id='button2'>button2</button> </div> 

i include baseview in someview:

<div ng-include="'baseview.html'"></div> <div id='someviewcontent'>     <button id='button2'>button2</button> </div> 

it becomes:

<div id='baseviewcontent'>     <span>some content</span>     <div id='somewhere'></div>     <span>some other content</span> </div> <div id='someviewcontent'>     <button id='button2'>button2</button> </div> 

but want: insert someviewcontent somewhere in baseview.html

<div id='baseviewcontent'>     <span>some content</span>     <div id='somewhere'><!--between here!-->         <div id='someviewcontent'>             <button id='button2'>button2</button>         </div>     </div><!--and here-->     <span>some other content</span> </div> 

how done?

i have idea q&a can't figure out.

note: don't want include someview.html baseview.html because baseview.html used multiple times

i mean:

someotherview.html

<div id='someotherviewcontent'>     <button id='button3'>button3</button> </div> 

after desired operation, become:

<div id='baseviewcontent'>     <span>some content</span>     <div id='somewhere'>         <div id='someotherviewcontent'>             <button id='button3'>button3</button>         </div>     </div>     <span>some other content</span> </div> 

you should use transclude directive. check transclude documentation here: https://docs.angularjs.org/guide/directive

angular.module('test').directive('baseview', function(){     return {         restrict: 'e',         replace: true,         transclude: true,         template: '\             <div id="baseviewconent">\                 <span>some content</span>\                 <div id="somewhere" ng-transclude></div>\                 <span>some other content</span>\             </div>\         '      } }); 

use in html as:

<base-view>     <div id='someviewcontent'>         <button id='button2'>button2</button>     </div> </base-view> 

renders :

<div id='baseviewcontent'>     <span>some content</span>     <div id='somewhere'>         <div id='someotherviewcontent'>             <button id='button3'>button3</button>         </div>     </div>     <span>some other content</span> </div>