Not able to access locally stored [data.json] file while using angular project

Question

I want to show records in datatable. The data are coming from data.json file. but I am unable to fetch data from the file.

Below is my code for accessing the data.

(function() {
  angular
    .module('app')
    .controller('AppController', function(
      $http,
      DTOptionsBuilder,
      DTColumnBuilder
    ) {
      vm = this;

      vm.details = [];

      vm.dtOptions = vm.dtOptions = DTOptionsBuilder.newOptions().withOption(
        'scrollX',
        true
      );

      vm.showDetails = function(index) {
        alert(JSON.stringify(vm.details[index], null, 4));
      };

      $http.get('data.json').then(function(response) {  // here is the file
        vm.details = response.data;
      });
    });
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I am using in asp.net project for implementing it.

For full reference have a look here

I have done almost all thing, but I am unable to access the data.json file. Please suggest how can I access that.