Q:

AngularJS Failing to Load JSON?

I'm working on my portfolio for my personal website and I have my projects listed in a JSON document as shown below (Small sample):
{
    "projects":[
        {
            "title":"CONTACTS LIST",
            "language":"Ruby",
            "description":"A simple, generic contacts list which is created using a hash. Gives the user the option to look up a contact via phone, 
           name, add/delete contacts, view the list or quit.",
            "link":"https://github.com/amarvick/Contact-List-Ruby"
        },

    {
        "title":"RANDOM NUMBER GUESSING GAME",
        "language":"Ruby",
        "description":"You may see this game in C++ below, but I decided to replicate it in Ruby to make sure I understood several basic
           concepts using this syntax. You just have to guess the random number generated between 1 and 100 before the computer
           does, and you take turns back and forth.",
        "link":"https://github.com/amarvick/Random-Number-Guessing-Game-RUBY"
    },

    {
        "title":"BANKING GAME",
        "language":"Java",
        "description":"In this game, two different classes are used; one being the program itself 
            that imports the other class, where all of the functions are represented. The computer prompts you 
            that you have $10000, and it asks how much of it you'd like to store in your checking and savings 
            account with the remainder in your pockets. The computer will continually give you a menu asking what 
            you'd like to do with your money; either make a deposit, withdrawal, transfer between accounts, check 
            balances, or quit. There are some other options as well included that haven't been edited yet (you'll 
            notice a luck option and an option to check your items), and I'm not sure how I'm going to make those 
            parts but it's there for making the game more interesting. It's great extra practice, too.",
        "link":"https://github.com/amarvick/Banking-Game-Java"
    }
]
}

My HTML Layout:
<!DOCTYPE html>

<html data-ng-app="myApp">
    <head>
        <title>Portfolio</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js"></script>
        <script src="1.4.8.angular.min.js"></script>
        <script src="3.1.1.jquery.min.js"></script>
        <script src="script.js"></script>
        <script src="app.js"></script>
    </head>

<body>
    <header id="header">
        <nav>
            <div id="slider-menu">
                <i class="fa fa-times fa-2x" id="exit-i" aria-hidden="true"></i>
                <ul id="navigation-menu-header">
                    <li><a href="/">HOME</a></li>
                    <li><a href="resume.html">RÉSUMÉ</a></li>
                    <li><a href="gallery.html">GALLERY</a></li>
                    <li><a href="twitterfeed.html">TWITTER FEED</a></li>
                    <li><a href="portfolio.html">PORTFOLIO</a></li>
                    <li><a href="publications.html">PUBLICATIONS</a></li>
                    <li><a href="tutoring.html">TUTORING</a></li>
                    <li><a href="contact.html">CONTACT</a></li>
                </ul>
            </div>
            <i class="fa fa-bars fa-2x" id="list-i" aria-hidden="true"></i>
        </nav>
    </header>

    <section class="body-home" id="body-portfolio" ng-controller="portfolioCtrl">
        <h2>PORTFOLIO</h2>
        <p>Here is a list of some projects that I have worked on in my own individual time. Each are organized by
           language, and code is available here! I'll get it on my <a href="http://www.github.com/amarvick">Github</a> 
           profile soon.</p>
        <section data-ng-repeat="project in projects">
            <h3>{{project.title}}</h3>
            <p>{{project.language}}</p>
            <p>{{project.description}}</p>
            <p id="github"><a href="{{project.link}}">Check it out on Github!</a></p>
        </section>
    </section>

    <hr>

    <footer id="footer">
        <p>GET IN TOUCH</p>
        <nav>
            <ul id="navigation-menu-footer">
                <li><a href="http://www.facebook.com/AlexMarvick" class="contact-link"><i class="fa fa-facebook fa-lg"></i></a></li>
                <li><a href="http://www.instagram.com/asmarvick" class="contact-link"><i class="fa fa-instagram fa-lg"></i></a></li>
                <li><a href="http://www.twitter.com/asmarvick" class="contact-link"><i class="fa fa-twitter fa-lg"></i></a></li>
                <li><a href="https://www.linkedin.com/in/alex-marvick-3b657974" class="contact-link"><i class="fa fa-linkedin fa-lg"></i></a></li>
                <li><a href="https://github.com/amarvick" class="contact-link"><i class="fa fa-github fa-lg"></i></a></li>
                <li></li>
            </ul>
        </nav>
        <p style="font-size: 14px">Seattle, WA, United States</p>
    </footer>
</body>

And my app.js file:
var myApp = angular.module("myApp", []);

myApp.controller("portfolioCtrl", ['$scope', '$http', function($scope, $http) {

var url = "data.json";

$http.get(url).then(function(response) {
    $scope.projects = response.data.projects;
}, function(error) {
    alert("JSON data failed to load!");

}

    );

}])

I've dealt with issues like this in the past, and the console gives me an error that looks as follows: 
1.4.8.angular.min.js:107 SyntaxError: Unexpected token 
 in JSON at position 236
    at JSON.parse (<anonymous>)
    at uc (1.4.8.angular.min.js:15)
    at $b (1.4.8.angular.min.js:82)
    at 1.4.8.angular.min.js:83
    at n (1.4.8.angular.min.js:7)
    at cd (1.4.8.angular.min.js:83)
    at c (1.4.8.angular.min.js:84)
    at 1.4.8.angular.min.js:119
    at r.$eval (1.4.8.angular.min.js:133)
    at r.$digest (1.4.8.angular.min.js:130)

It appears that there's something wrong with the minified angular file that I'm importing, but that doesn't seem to be in my control. I've had similar issues before and it'll all the sudden work again randomly. Looking for any simple way to resolve this -- I normally use a simple Python HTTP Server to view my site.

A:

Observation : Your JSON is not valid.

Working Demo :

var myApp = angular.module("myApp", []);

myApp.controller("portfolioCtrl", ['$scope', '$http', function($scope, $http) {

var responseData = {
 "projects": [{
   "title": "CONTACTS LIST",
   "language": "Ruby",
   "description": "A simple, generic contacts list which is created using a hash. Gives the user the option to look up a contact via phone, name, add / delete contacts,view the list or quit.",
   "link": "https://github.com/amarvick/Contact-List-Ruby"
  },

  {
   "title": "RANDOM NUMBER GUESSING GAME",
   "language": "Ruby",
   "description": "You may see this game in C++ below, but I decided to replicate it in Ruby to make sure I understood several basic concepts using this syntax.You just have to guess the random number generated between 1 and 100 before the computer does,and you take turns back and forth.",
   "link": "https://github.com/amarvick/Random-Number-Guessing-Game-RUBY"
  },

  {
   "title": "BANKING GAME",
   "language": "Java",
   "description": "In this game, two different classes are used; one being the program itself that imports the other class, where all of the functions are represented.The computer prompts you that you have $10000,and it asks how much of it you 'd like to store in your checking and savings account with the remainder in your pockets.The computer will continually give you a menu asking what you 'd like to do with your money; either make a deposit, withdrawal, transfer between accounts, check balances,or quit.There are some other options as well included that haven 't been edited yet (you'll notice a luck option and an option to check your items), and I 'm not sure how I'm going to make those parts but it 's there for making the game more interesting. It's great extra practice, too.",
   "link": "https://github.com/amarvick/Banking-Game-Java"
  }
 ]
};

$scope.projects = responseData.projects;

}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="portfolioCtrl">
  <div ng-repeat="project in projects">
            <h3>{{project.title}}</h3>
            <p>{{project.language}}</p>
            <p>{{project.description}}</p>
            <p id="github"><a href="{{project.link}}">Check it out on Github!</a></p>
        </div>
</div>

