Hiding multiple <div> elements using ng-show/ng-hide (AngularJS) - angularjs

Question

Good day!
So I trying to make Single Page App, but I am stuck with trying to hide/show div elements using checkbox. Since I was unsure how to make module, to hide/show elements, I used google to search up some tutorial, and found this code:
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
//This will hide the DIV by default.
$scope.IsVisible = false;
$scope.ShowHide = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisible = $scope.IsVisible ? false : true;
}
});
Unfortunately, when I try to apply this module to my html code, I always get this error:
Error: [ng:areq] Argument 'MyController' is not a function, got undefined
Here is my html code:
<div ng-app="MyApp" ng-controller="MyController">
<div class="form-group" ng-show = "IsVisible">
<label class="form-label" for="field-6">{{"NOTES_INSPECTOR"| translate}}</label>
<span class="desc"></span>
<div class="controls">
<textarea class="form-control" cols="5" id="field-6" ng-model="comment"></textarea>
</div>
</div>
<div class="form-group" ng-show = "IsVisible">
<label class="form-label" for="manager">{{"PREPAYMENT"| translate}}</label>
<span class="input-group-addon">€</span>
<input type="text" class="form-control" ng-model="avans">
<span class="input-group-addon">.00</span>
</div>
<div class="form-group" ng-show = "IsVisible">
<label class="form-label" for="manager">{{"THE_FINAL_PRICE"| translate}}</label>
<span class="input-group-addon">€</span>
<input type="text" class="form-control" ng-model="finalPrice">
<span class="input-group-addon">.00</span>
</div>
<div class="form-group">
{{"ORDER_IS_USER_ORDER"| translate}}
<label class="iswitch iswitch-md bg-info">
<input type="checkbox" ng-model="IsVisible">
<i></i>
</label> {{"ALLOWED"| translate}}
</div>
</div>
Idea behind this html code is, whenever user presses button which is 4th div in the code, elements should appear, else, be hidden. Unfortunately it doesn't work. Any ideas why?

Answer 1

DEMO
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
//This will hide the DIV by default.
$scope.IsVisible = false;
$scope.ShowHide = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisible = $scope.IsVisible ? false : true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
<div class="form-group" ng-show = "IsVisible">
<label class="form-label" for="field-6">{{"NOTES_INSPECTOR"}}</label>
<span class="desc"></span>
<div class="controls">
<textarea class="form-control" cols="5" id="field-6" ng-model="comment"></textarea>
</div>
</div>
<div class="form-group" ng-show = "IsVisible">
<label class="form-label" for="manager">{{"PREPAYMENT"}}</label>
<span class="input-group-addon">€</span>
<input type="text" class="form-control" ng-model="avans">
<span class="input-group-addon">.00</span>
</div>
<div class="form-group" ng-show = "IsVisible">
<label class="form-label" for="manager">{{"THE_FINAL_PRICE"}}</label>
<span class="input-group-addon">€</span>
<input type="text" class="form-control" ng-model="finalPrice">
<span class="input-group-addon">.00</span>
</div>
<div class="form-group">
{{"ORDER_IS_USER_ORDER"}}
<label class="iswitch iswitch-md bg-info">
<input type="checkbox" ng-model="IsVisible">
<i></i>
</label> {{"ALLOWED"}}
</div>
</div>