Angular JS - the common issue of two apps using the same route provider

Question

Hey all and thanks for reading. I have a client side set of text blurb I wanted to feed through views using ng. My problem is that although I feel I have this set up correctly, I only ever see a repetition of the first view on the second view and have lost functionality on the first view anchors to change the text blurbs. I was wondering if anyone could shed some light on it for me at all. It been a while since I did anything angularJS, I forgot how fun yet brick walling it can be. I post the app.js code below

var animateDesign = angular.module('animateDesign', ["ngAnimate", "ngRoute"]);
  animateDesign.config(['$routeProvider', function($routeProvider){
  $routeProvider.
      when('/background', {templateUrl: './assets/views/design/background.html',
           css: ['./assets/vendor/bootstrap-3.2.0-dist/css/bootstrap.min.css', 'assets/css/after_bs.css']}).
      when('/logo', {templateUrl: './assets/views/design/logo.html',
           css: ['./assets/vendor/bootstrap-3.2.0-dist/css/bootstrap.min.css', 'assets/css/after_bs.css']}).
      when('/branding', {templateUrl: './assets/views/design/branding.html',
           css: ['./assets/vendor/bootstrap-3.2.0-dist/css/bootstrap.min.css', 'assets/css/after_bs.css']}).
  when('/illustration', {templateUrl: './assets/views/design/illustration.html',
           css: ['./assets/vendor/bootstrap-3.2.0-dist/css/bootstrap.min.css', 'assets/css/after_bs.css']}).
      when('/print', {templateUrl: './assets/views/design/print.html',
           css: ['./assets/vendor/bootstrap-3.2.0-dist/css/bootstrap.min.css', 'assets/css/after_bs.css']}).
      when('/web', {templateUrl: './assets/views/design/web.html',
           css: ['./assets/vendor/bootstrap-3.2.0-dist/css/bootstrap.min.css', 'assets/css/after_bs.css']}). 
      otherwise({redirectTo: '/background'});
}])
.animation('.reveal-animation-design', function($scope) {
  return {
    enter: function(element, done) {
      element.css('display', 'none');
      element.fadeIn(1500, done);
      return function() {
        element.stop();
      }
    },
    leave: function(element, done) {
      element.fadeOut(1500, done)
      return function() {
        element.stop();
      }
    }
  }
});

angular.bootstrap(document.getElementById("animatePrint"), ['animatePrint']);

var animatePrint = angular.module('animatePrint', ["ngAnimate", "ngRoute"]);
  animatePrint.config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/litho', {templateUrl: './assets/views/print/litho.html',
           css: ['./assets/vendor/bootstrap-3.2.0-dist/css/bootstrap.min.css', 'assets/css/after_bs.css']}).
      when('/digital', {templateUrl: './assets/views/print/digital.html',
           css: ['./assets/vendor/bootstrap-3.2.0-dist/css/bootstrap.min.css', 'assets/css/after_bs.css']}).
   when('/other', {templateUrl: './assets/views/print/other.html',
           css: ['./assets/vendor/bootstrap-3.2.0-dist/css/bootstrap.min.css', 'assets/css/after_bs.css']}).
      otherwise({redirectTo: '/litho'});
}])
.animation('.reveal-animation-print', function() {
  return {
    enter: function(element, done) {
      element.css('display', 'none');
      element.fadeIn(1500, done);
      return function() {
        element.stop();
      }
    },
    leave: function(element, done) {
      element.fadeOut(1500, done)
      return function() {
        element.stop();
      }
    }
  }
});

I will also post the html implementation too, as it could just be debugging blindness and likely the simplest thing

    <div class="col-md-6">
                    <div class="container">
                        <div ng-app="animateDesign">
                            <div class="wrapper">
                                <div ng-view class="reveal-animation-design"> 
                                This is the background area                 
                                </div>
                            </div>
                        </div>
                    </div>        
                </div>
            </div>
    </div>
        <!--/.container-->
 </div>
    <!--/#design-->
    
    <div id="print" class="page-section">
        <div class="container">
        <h2> Print </h2>
            <div class="row">
                <div class="col-md-3 no-float">
                     <!--start Vertical Header Test-->
                     <nav class="navbar navbar-left" role="navigation">
                              <!-- Brand and toggle get grouped for better mobile display -->
                           <div class="navbar-nav">
                                <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#alt-nav">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"><img src="assets/img/png/dd-logo-basic-sm.png"/></span>
                                </button>
                           </div>                            
                              <!-- Collect the nav links, forms, and other content for toggling -->
                           <div id="alt-nav" class="collapse navbar-collapse">
                                <ul class="nav navbar-left">                  
                                   <li><a href="#/litho">litho</a></li>
                                   <li><a href="#/digital">digital</a></li>
                                   <li><a href="#/other">other</a></li>
                                </ul>
                           </div><!-- /.navbar-collapse -->
                     </nav>        
                </div>
                <div class="col-md-6 no-float">
                     <div class="container">
                     <!--this is not showing on the page TODO: animatePrint needs to show on page, before using id="animatePrint" and having a default otherwise call to be the background-->
                          <div id="animatePrint">
                              <div class="wrapper">
                                    <div ng-view class="reveal-animation-print">                  
                                    </div>
                              </div>
                          </div>
                     </div>        
                </div>
            </div>
            <!--/.row-->
        </div>
        <!--/.container-->
     </div>
     <!--/.print-->

Thank you in advance for any help shedding light on this. Cheers all and thanks again for reading:)

P.S> Could someone please help me/ guide me to format the code too, it seems like it wont accept the code line after my first declared line - sry still a bit new. I had to add as a snippet, to get any success posting - (me noob)

Gruffy :)