Angular ng-click onsen - angularjs

Question

So im new to coding and i cant seem to figure out some issue that i have.
<ons-row ng-click="myNavigator.pushPage('{{building.file}}.html')">
So i started and the {{ building.file }} isn't going to the url. can someone help me or explain why it isnt workking? here is my complete code
<div ng-init="buildings = [
{name:'name1',file:'file1', location:'location1', image:'images/img1.jpg', number:'[phone]'},
{name:'name2',file:'file2', location:'location2', image:'images/img2.jpg', number:'[phone]'},
{name:'name3',file:'file3', location:'location3', image:'images/img3.jpg', number:'[phone]'},
]">
<!--There Are {{buildings.length}} restaurants-->
<input type="search" ng-model="q" class="search-input" placeholder="Search..." />
<br />
<ons-list >
<ons-list-item modifier="chevron" class="list-item-container" ng-repeat="building in buildings | filter:q as results">
<ons-row ng-click="myNavigator.pushPage('/' + {{building.file}} + '.html')">
<ons-col width="95px">
<img src="{{building.image}}" class="thumbnail">
</ons-col>
<ons-col>
<div class="name">
{{building.name}}
</div>
<div class="location">
<i class="fa fa-map-marker"></i> {{building.location}}
</div>
<div class="desc">
{{building.number}}
</div>
</ons-col>
<ons-col width="40px"></ons-col>
</ons-row>
</ons-list-item>
</ons-list>
<ul class="example-animate-container">
<li class="animate-repeat" ng-if="results.length == 0">
<strong>No results found...</strong>
</li>
<li class="animate-repeat" ng-if="results.length == 555">
<strong>No results found...</strong>
</li>
</ul>

Answer 1

I don't have your exact code but i think u should not use expression within function call. I created sample demonstration for your app Demo. Please check on console by clicking on name. it logs correct url. Hope this helps!
<div ng-click="pushPage('/' + building.file + '.html')">
{{building.name}}
</div>

Answer 2

I don't see the ons-navigator in your code. The easiest way in angular is to use a var for ons-navigator and then you can use myNavigator.pushPage('name')
<ons-navigator var="myNavigator">
<ons-page>
<ons-row ng-click="myNavigator.pushPage('file.html')" > My Row </ons-row>
</ons-page>
</ons-navigator>
<ons-template id="file.html">
<ons-page>
My Content
</ons-page>
</ons-template>