Navigate from one external template to another with ionic framework doesn't work properly

So in my index.html file, I have the following code, essentially linking two external html pages.

<!--First Template-->
<script id="views/profileView.html" type="text/ng-template">
 <div ng-include="'./views/profileView.html'"></div>
</script>

<!--Second Template-->
<script id="views/callView.html" type="text/ng-template">
 <div ng-include="'./views/callView.html'"></div>
</script>

The first template to load is profileView, which loads fine. In that template I have a button, on click will load the state of the second template. The second page doesn't load completely. Its a partial transition. I noticed this problem is because I was trying to load a state of another external template. If I was to not exclude the content into an external template and just write it out in the index file itself, I don't get this problem. Have anyone experienced such issues when navigating from one external page to another? Are there any solutions?

if i were you i would use the angular $stateProvider, so you would have something like this

var app = angular.module('myapp', ['ionic']);

    app.config('$stateProvider', function($stateProvder){
     $stateProvider
        .state('home', {
          url: '/home',
          templateUrl: 'templates/home.html'
        }).state('pageone', {
          url: '/pageone',
          templateUrl: 'templates/pageone.html'
        });
});

Then in your index.html you just have an ion nav view like so:

 <ion-nav-view animation="no-animation"></ion-nav-view>

then to navigate states in your controller you just include $state like you would $scope call this for example: $state.go('home')

you can read more about it and see more examples here: http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/