AngularJS页面切换问题

刚开始学习，想用angular+ionic写一个页面切换的效果。
点击page1中的一个图片，页面切换为page2。
因为页面太多不想写那么多html，所以使用ng-show。
代码如下：

html：

<body ng-controller="binder">

    <!-- page1 -->
    <div ng-show="controller.page('home')">
        <div class="content">
            <button class="item item-image" ng-click="controller.switch('myDevice')">
                <img src="img/choose_mine.png">
            </button>
        </div>
    </div>

    <!-- page2 -->
    <div ng-show="controller.page('myDevice')">
        <ion-content style="background-color: rgb(235,237,240)">
            <a class="item item-image" href="#" style="margin: 5px 5px 7px 5px">
                <img src="img/choose_D1.png">
            </a>
        </ion-content>
    </div>

    <script src="bower_components/ionic/release/js/ionic.bundle.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="app.js"></script>
</body>

js:

var bindDevice = angular.module('bind',['ionic']);

bindDevice.controller('binder',function () {
    var self = this;
    self.indexPage = 'home';

    self.page = function (page) {
        return page == self.indexPage;
    };

    self.switch = function (index) {
        self.indexPage = index;
    };

})

不知道哪里出了问题，运行效果是页面闪现一下然后就消失了。
本人小白，希望大神们能够帮忙看看，感激不尽。

页面切换还是建议使用 ui-router

个人理解这应该和分页一样吧所以你试试配置路由

【热门文章】