AngularJS

Partials Transiton

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc6.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script type="text/javascript" src="https://raw.github.com/rthprog/fixie/master/fixie_min.js"></script>

<div ng-app="myApp">
    
  <ng-view></ng-view>
    
  <hr />
    
  <div ng-controller="AppCtrl">  
  <li ng-repeat="slide in slides">
      <a href="#/slides/{{slide.id}}" ng-click="setCurrentPageId()"><span>{{slide.id}}: {{slide.title}}</span></a>
    </li>
  </div>
    
    <script type="text/ng-template" id="slides/1.html">
      <div class="hero-unit">
        <p>This is the partial for view 1.</p>
          <p class="fixie"></p>
      </div>
  </script>
  <script type="text/ng-template" id="slides/2.html">
      <div class="hero-unit">
        <p>This is the partial for view 2.</p>
          <p class="fixie"></p>
      </div>
  </script>
  <script type="text/ng-template" id="slides/3.html">
      <div class="hero-unit">
        <p>This is the partial for view 3.</p>
          <p class="fixie"></p>
      </div>
  </script>
</div>

JavaScript

angular.module('myApp', []).
config(function($routeProvider) {
    $routeProvider.
        when('/slides/:slideId', {
        template: 'slides/1.html', controller: MyCtrl1
    });
});

function AppCtrl($scope, $element){
    $scope.slides = [
    { "title" : "Slide 1", "id" : "1"  },
    { "title" : "Slide 2", "id" : "2"  },
    { "title" : "Slide 3", "id" : "3"  }
]
element.on('$md.dragstart', preventDrag);
                var parent = element.parent();
    $scope.currentPageId = 1;
    
    $scope.setCurrentPageId = function()
    {
        $scope.currentPageId = this.slide.id;
        console.log($scope.currentPageId);   
    }   
}

function MyCtrl1($routeParams) {

    console.log($routeParams.slideId);
}

function MyCtrl2($routeParams) {

    console.log($routeParams.slideId);
}

function MyCtrl3($routeParams) {

  console.log($routeParams.slideId);
}