{% extends 'base.html' %}

{% set mytitle="Hello" %}

{# ----------- title -------------- #}

{% block title %}{{ mytitle }}{% endblock %}

{# ----------- content ------------- #}

{% block content %}

<div ng-app="myApp">

    <div ng-controller="HelloController">
        <p>
        Angular has something to say: [[message]]
        </p>
    
        <button class="btn btn-large btn-primary" ng-click="changeMessage()">
          Change Message
        </button>
    
    </div>

</div>


<script type="text/javascript">

(function() {

    function HelloController($scope) {
        $scope.message = "Hello Cruel Angular World!";

        $scope.changeMessage = function() {
            $scope.message = "Goodbye Cruel Angular World!";
        };
    };

    var a = angular.module("myApp", [], function($interpolateProvider) {
                $interpolateProvider.startSymbol('[[');
                $interpolateProvider.endSymbol(']]');
            }
        );
    var c = a.controller("HelloController", ["$scope", HelloController]);

})();

</script>
{% endblock %}