Using Onsenui cant push between pages

I have an app that has multipe .html pages instead of 1 page which holds all the pages. I am trying to use ons.navigator.pushPage("path/to/page.html", {foo: "bar"}); but it doesnt work

However, doing this works:

<p align="center"><ons-tabbar-item page="activity.html" should-spin="false"><ons-button modifier="large--cta">view</ons-button></ons-tabbar-item></p>

But this doesnt work:

<p align="center"><ons-button modifier="large--cta" ng-click="ons.navigator.pushPage('activity.html', {foo: 'bar'})">view</ons-button></p>

timeline.html

<ons-page ng-controller="CircularActivity">

    <div style="text-align: center" >

                <ons-row style="margin-top: 0px; padding:20px;text-align: center;">
                    <ons-col >
                    <p> Test History</p>
                    <ul ng-if="corttimeline.length"  class="cbp_tmtimeline">
                        <li ng-repeat="cortisolx in corttimeline" ng-show="corttimeline.length" style="margin-left:0px;padding-left:10px; list-style:none;border-bottom:1px solid #e3e3e3;padding-top:15px;padding-bottom:15px;color:#333;font-size:12px">
                            <time class="cbp_tmtime" datetime="2013-04-10 18:30"> <span style="color:#b6b6b6">{{cortisolx.date_created_2 || ""}}</span> <span>{{cortisolx.day_name || "" }}</span></time>
                            <!--<div class="cbp_tmicon"><ons-icon icon="ion-android-open" fixed-width="false" style="vertical-align: -4px;color:#fff"></ons-icon></div>-->
                            <div class="cbp_tmlabel" ng-click=" ons.screen.presentPage( activity.html, { animation: 'fade' });">
                                    <h2>{{cortisolx.cortisol || "0" }} <span style="font-size:12px;color:#555"> ng/ml</span></h2>
                                    <p align="center"><ons-tabbar-item page="activity.html" should-spin="false"><ons-button modifier="large--cta">view</ons-button></ons-tabbar-item></p>
                            </div>
                        </li>
                    </ul>                    


                    </ons-col>
                </ons-row>

    </div>
</ons-page>

Index.html:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' https://*.googleapis.com https://*.cloudflare.com 'unsafe-inline'; script-src 'self' http://*.phonegap.com https://*.googleapis.com https://*.cloudflare.com http://*.elasticbeanstalk.com https://*.monaca.mobi:8080 'unsafe-inline' 'unsafe-eval'">
    <link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

    <script src="components/loader.js"></script>
    <script src="js/roundProgress.js"></script>
    <script>
       var app =  ons.bootstrap('app',  ['onsen','angular-svg-round-progress']);
    </script> 

    <script src="js/jquery.js"></script>
    <script src="js/cortisol.js"></script>
    <script src="js/circular.js"></script>

    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery.sparkline.min.js"></script>

</head>
<body>
<ons-page>
    <ons-tabbar position="top"  >
      <ons-tabbar-item page="dashboard.html" style="margin-top:20px"><span style="margin-top:20px"><img src="img/icon.svg" width="34"/></span></ons-tabbar-item>
      <ons-tabbar-item page="dashboard.html"  icon="ion-ios-pulse-strong" active="true"  class="tab-bar__button tab-bar--top-border__button"></ons-tabbar-item>
      <ons-tabbar-item page="timeline.html"  icon="ion-android-calendar"></ons-tabbar-item>
      <ons-tabbar-item page="capture.html"  icon="ion-pinpoint"></ons-tabbar-item> 
      <ons-tabbar-item page="settings.html"  icon="ion-android-settings"></ons-tabbar-item>
    </ons-tabbar>
</ons-page>

</body>
</html>