AngularJS 1.4.x

var app = angular.module('learning', ['ui.router','ngResource']);

app.controller('mainCOntroller',['$scope',function($scope){
  
}]);

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
  $urlRouterProvider.otherwise('/');
  
  $stateProvider.
    state('topics',{
      url: '/topic/:topicId?subtopicId',
      views: {
        '' : {
          templateUrl: 'topics.html',
          controller: 'topicController'
        },
        'subtopics@topics': {
          templateUrl: 'subtopics.html'
        },
        'data@topics': {
          templateUrl: 'data.html'
        }
      }
    });
}]);

app.controller('topicController', ['$scope','TopicProvider',function($scope,TopicProvider){
  
  var t = TopicProvider.get(function(tp){
    $scope.t = tp.topics;
    $scope.st = tp.subtopics;
    $scope.d = tp.data;
  });
}]);

app.factory('TopicProvider', ['$resource', function($resource){
  return $resource('topics.json',{}, {
    get: {
      method: 'GET'
    }
  });
}]);

<!DOCTYPE html>
<html ng-app="learning">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-resource.js"></script>
    <script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    
  </head>

  <body ng-controller="mainCOntroller">
    <a ui-sref="topics({topicId:1})">Click here for learning topics</a>
    <div ui-view></div>
    <script src="app.js"></script>
  </body>

</html>

/* Put your css in here */

{
  "topics": [
    {"topicId": 1, "name": "Topic 1"},
    {"topicId": 2, "name": "Topic 2"},
    {"topicId": 3, "name": "Topic 3"}
    ],
  "subtopics": [
    {"topicId": 1, "name": "subtopic 1", "subtopicId": 1},
    {"topicId": 1, "name": "subtopic 2", "subtopicId": 2},
    {"topicId": 1, "name": "subtopic 3", "subtopicId": 3}
    ],
  "data": "Default data for topic1/subtopic 1"
}

<pre> Topics<pre>
  <ul>
    <li ng-repeat="s in t">
      <a ui-sref="topics({topicId: s.topicId})"> {{s.name}}</a>
    </li>
  </ul>
  
  <div ui-view="subtopics"></div>
  
  <div ui-view="data"></div>

<pre> Sub topics<pre>
  <ul>
    <li ng-repeat="s in st">
      <a ui-sref="topics({topicId: s.topicId, subtopicId: s.subtopicId})"> {{s.name}}</a>
    </li>
  </ul>

<pre> Data</pre>
{{d}}