How to dynamically insert items from a Array for the filter

[ThiagoJem]

How do I insert dynamically items from this array to the filter that is in wizard.html page , for when the templateUrl , which is on the route , make the call can be rendered in wizard.html page. Controller

angular.module('tareasApp')
  .controller('NatureCtrl', function ($scope, $routeParams) {
    $scope.items =[
     {    
          href:'/sound-waves', 
          img:'waves.jpg', 
          video:'//www.youtube.com/watch?v=OG2eGVt6v2o',
          description:'Those Relaxing Sounds of Waves'
     },
     {    
          href:'/nature-relaxing-sound', 
          img:'ocean.jpg', 
          video:'//www.youtube.com/watch?v=SWR0GdC7_40',
          description:'Nature Sounds Relaxing Ocean Sounds'
     }
    ];  
 });

Page wizard.html

<div ng-controller="NatureCtrl">
 <div ng-repeat="item in items | filterBy: ['href']: ''Insert here , dynamically , the items of  array correspondent the accessed page" >

    <img ng-src="images/{{ item.img }}" width="400" height="200" >

    <p>{{item.description}}</p>

    <iframe width="655" height="400" ng-src="{{ item.video }}" frameborder="0" allowfullscreen></iframe>   
</div>
</div>

Route

angular.module('tareasApp')
  .config(function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider

.when("/:pageName", {
     templateUrl: "views/wizard.html",
     controller: "PranksCtrl"
     })
      .otherwise({
        redirectTo: '/'
      });    
  });

The goal is to avoid having multiple pages with the same structure.