Untitled

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js">
        </script>
        <script type="text/javascript" src="app.js"></script>
        <script type="text/javascript" src="destiArtiController.js"></script>
    </head>
    <body ng-app="myApp">
         <h1>ui-router passing parameters</h1>
        <div>
            <ul>
                <li><a ui-sref=".home">home</a></li>
                <li><a ui-sref=".desti">destination</a></li>
            </ul>
            <div ui-view></div>
        </div>
    </body>
</html>

var app = angular.module('myApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider
    .otherwise('/');

  $stateProvider
    .state('home', {
      url: '/home',
      template: '<div> home </div>'
    })
    .state('desti', {
      url: '/desti',
      templateUrl: 'desti.html',
      controller: "destiArtiController"
    })
    .state('desti.destiArti', {
            url: '/destiArti/:id',
            templateUrl: 'destiArti.html',
            controller: "destiArtiController"
            
    })
  ;
});

app.controller('destiController', ['$scope', function($scope){
        $scope.destis = [
        {
            
            "url": "#",
            "name": "South Cebu" 
        },
        
        {
            "url": "#",
            "name": "Bataan" 
        },
        
        {
            "url": "#",
            "name": "Calaguas" 
        },
        
        {
            "url": "#",
            "name": "Ilocos" 
        },
        {
            "url": "#",
            "name": "Baguio" 
        },
        {
            "url": "#",
            "name": "La Union" 
        } 
    ];
  
}]);


    <div>
      <h3>Destinations: </h3>
      <div ng-repeat="detail in details">
        <p>
          <a ui-sref="desti.destiArti({ id: detail.id })">{{ detail.destiName }}</a>
        </p>
      </div>
    </div>

<div ng-repeat="detail in details">
    <p>{{ detail.destiName }}</p>
    <ul>
      <li ng-repeat="topdesti in detail.topDesti">{{ topdesti.name }}</li>
      </ul>
</div>

app.controller('destiArtiController', ['$scope', '$stateParams', function($scope, $stateParams) {
  $scope.id = $stateParams.id;
  $scope.details = [{
    "id": 1,
    "destiName": "South Cebu",
    "sourceUrl": "https://en.wikipedia.org/wiki/Cebu",
    "topDesti": [{
        "name": "Sirao Flower Farm",
        "desc": "Sirao Flower Farm a.k.a. “Little Amsterdam”"
      },

      {
        "name": "Moalboal",
        "desc": "Moalboal, Cebu is known as home of sardine run"
      },

      {
        "name": "Basilica Minore del Santo Niño",
        "desc": "The Minor Basilica of the Holy Child and commonly known as the Santo Niño Basilica"
      },

      {
        "name": "Kawasan Falls",
        "desc": "pearl of the PH."
      },

      {
        "name": "Fuerte de San Pedro",
        "desc": "Fuerte de San Pedro is a military defence structure"
      },

      {
        "name": "Magellan’s Cross",
        "desc": "It is an important symbol of Cebu"
      }

    ]
  }, {
    "id": 2,
    "destiName": "Bataan",
    "sourceUrl": "https://en.wikipedia.org/wiki/Bataan",
    "topDesti": [{
        "name": "Mount Samat",
        "desc": "Located near its summit"
      },

      {
        "name": "World War II Museum",
        "desc": "Museum"
      }


    ]
  }];

}]);