Untitled

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

<head>
  <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
  <script data-require="angular-route@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="container-fluid">

    <div class="row">

        <div class="col-md-offset-1 col-md-6">
            <ng-view></ng-view>
        </div>


    </div>

  </div>
</body>

</html>

// Code goes here

angular.module('app', ['ngRoute']).config(function($routeProvider) {
  $routeProvider
    .when("/News", {
      templateUrl: "News.html",
      controller: "NewsContoller"
    }).when("/NewsViewer", {
      templateUrl: "NewsViewer.html",
      controller: "NewsViewerController"
    }).otherwise({
      redirectTo: '/News'
    })
}).controller('NewsContoller', function($scope, $http, viewData, $location) {
  $http({
    method: 'GET',
    url: 'News.json'
  }).then(function success(response) {
    $scope.News = response.data;
  });
  $scope.showArticle = function(article) {
    viewData.article = article;
    $location.path("/NewsViewer");
  }
}).controller('NewsViewerController', function($scope, viewData) {
  $scope.Article = viewData.article;
}).value('viewData', {})

/* Styles go here */

<div>
  <div ng-repeat="NewsData in News.Articles">
    <h3>{{NewsData.Title}}</h3>
    <p>{{NewsData.Abstract}}</p>
    <a href ng-click="showArticle(NewsData)">more</a>
  </div>
</div>

{
  "Articles": [
    {
      "Title": "News 1",    
      "Abstract": "News 1 abstract ...",
      "Body": "News 1 starts here.... ",
      "Comments": [
        {
          "comment 1" : "Comment 1 goes here",
          "comment 2" : "Comment 2 goes here",
          "comment 3" : "Comment 3 goes here"
        }]
    },

    {
      "Title": "News 2",
      "Abstract": "News 2 abstract ... ",
      "Body": "News 2 starts here...",
      "Comments": [
        {
          "comment 1" : "Comment 1 goes here",
          "comment 2" : "Comment 2 goes here"
        }]
    }    
  ]
}

<div>
  <div>
    <h3>{{Article.Title}}</h3>
    <p>{{Article.Abstract}}</p>
    <p>{{Article.Body}}</p>
  </div>

  <div class="comments">
    <h4>Comments</h4>
    <hr>
    <p ng-repeat="(key, value) in Article.Comments[0]">
      {{value}}
    </p>
  </div>
</div>
<a ng-href="#!/News">All News</a>