I am currently learning AngularJs and practicing some coding. However, I am facing an issue where the javascript code does not work when I run it on my browser (Chrome/IE). The "{{product.like}}" code is not functioning as expected. Is there any specific dependencies I need to install or something else that I am missing? Any help or guidance is greatly appreciated. Thank you in advance. Apologies for any language mistakes. :)
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>InstantGram | Posts</title>
<link rel="icon" type="image/gif/png" href="icon.png">
</head>
<header>
<h1 class="mainHead"><span id="insColor">Instant</span>Gram</h1>
</header>
<body ng-app="myApp">
<div class="main" ng-controller="mainController">
<div>
<h2 class="sunset">The Unusual Sunset</h2>
<img src="The_sunset.jpg" alt="Unloaded Image" width="477px" height="268px"/>
<div class="rating">
<p class="likes" ng-click="plusOne($index)">+ {{ product.likes }}</p>
</div>
</div>
<hr>
<div>
<h2>The Metropolis Before 1927</h2>
<img src="metropolis_before.jpg" alt="Unloaded Image"/>
<div class="rating">
<p class="likes" ng-click="plusOne($index)">+ {{ product.likes }}</p>
</div>
</div>
<hr>
<div>
<h2>The Paradise</h2>
<img src="lake.jpg" alt="unloaded image" width="477px" height="268px">
<div class="rating">
<p class="likes" ng-click="plusOne($index)">+ {{ product.likes }}</p>
</div>
</div>
<hr>
<div class="footer">
<div class="container">
<h2>Available for iPhone and Android.</h2>
<img src="http://s3.amazonaws.com/codecade-content/projects/shutterbugg/app-store.png" width="120px" />
<img src="http://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="110px" />
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/mainController.js"></script>
</body>
</html>
ANGULARJS/JAVASCRIPT CODES:
- App.js
var app = angular.module("myApp", []);
-mainController.js
app.controller('mainController', ['$scope', function($scope) {
$scope.like = 0;
$scope.plusOne = function(index) {
$scope.like[index].likes += 1;
};
}]);