angularjs - How to use same html but different model values in angular js? -

i have scenario in html of 2 partials same model different. instance see below code

 <ul class="feeds">     <li ng-if="scleanerdata.contact_no">       <div><i class="fa fa-phone color-grey" aria-hidden="true"></i></div>{{scleanerdata.contact_no}}</li>     <li ng-if="scleanerdata.email">       <div><i class="fa fa-envelope color-grey" aria-hidden="true"></i></div>{{scleanerdata.email}}</li>     <li ng-if="scleanerdata.address">       <div><i class="fa fa-globe color-grey" aria-hidden="true"></i></div>{{scleanerdata.address}}</li>   </ul> 

i need same html in second partial time bindings

<ul class="feeds">         <li ng-if="profile.house">           <div><i class="fa fa-phone color-grey" aria-hidden="true"></i></div>{{profile.house}}</li>         <li ng-if="profile.email">           <div><i class="fa fa-envelope color-grey" aria-hidden="true"></i></div>{{profile.email}}</li>         <li ng-if="profile.home}">           <div><i class="fa fa-globe color-grey" aria-hidden="true"></i></div>{{profile.home}}</li>       </ul> 

is there way can write html once data binding works both of them.

create custom directive html template , having isolated scope. use directive ever required , passing model input directive different locations.

below short example, might you.

define directive:

app.directive('mydirective', function(){   return {     restrict: 'e',     scope: {       contactinfo: '='     },     templateurl: 'my-template.html',     link: function (scope,element,attrs,ctrl){       // can manipulate data / dom here, if required.     }   } }) 

associate directive html:

<ul class="feeds">   <li ng-if="contactinfo.contact_no">     {{contactinfo.contact_no}}</li>   <li ng-if="contactinfo.email">     {{contactinfo.email}}</li>   <li ng-if="contactinfo.address">     {{contactinfo.address}}</li> </ul> 

use directive in main html:

<button ng-click="showinfo1 = true;showinfo2=false;">show info 1</button> <button ng-click="showinfo2 = true;showinfo1=fasle;">show info 2</button> <my-directive contact-info="contactinfo1" ng-show="showinfo1"></my-directive> <my-directive contact-info="contactinfo2" ng-show="showinfo2"></my-directive> 

plunk here: https://plnkr.co/edit/eknrkubbrl4rr7kma1yw?p=preview