Angular ngInclude Gotcha

I killed more time than I care to admit with an ngInclude problem with AngularJS. ngInclude should be pretty simple, but I was making it hard.

When including, you have to tell where the code is to include. I was doing it like this:

<ion-tabs class="tabs-energized tabs-icon-top">

  <ion-tab icon-on="ion-ios7-paperplane" icon-off="ion-ios7-paperplane-outline">

    <div ng-include="main/invitations/invitationsSent.html"></div>

  </ion-tab>

  <ion-tabicon-on="ion-ios7-email" icon-off="ion-ios7-email-outline">

    <div ng-include="main/invitations/invitationsReceived.html"></div>

  </ion-tab>

</ion-tabs>

It needs to be like this :

<ion-tabs class="tabs-energized tabs-icon-top">

  <ion-tab icon-on="ion-ios7-paperplane" icon-off="ion-ios7-paperplane-outline">

    <div ng-include="'main/invitations/invitationsSent.html'"></div>

  </ion-tab>

  <ion-tabicon-on="ion-ios7-email" icon-off="ion-ios7-email-outline">

    <div ng-include="'main/invitations/invitationsReceived.html'"></div>

  </ion-tab>

</ion-tabs>

Can you spot the difference? The good example has the template string wrapped in single quotes. That ng-include is expecting an expression. A raw string is not an expression so your template will not include. Adding the single quotes lets Angular evaluate it and include your template.

Hopefully this little tidbit helps someone avoid wasting all the time I did!