angular

    .module('app', [])

    .controller('MainCtrl', function() {

        vm = this;

        console.log('Loading MainCtrl and assign 1 to variable value');

        vm.value = 1;

    })

    .directive('setupItemized', function() {

        return {

            restrict: 'E',

            transclude: true,

            scope: {},

            bindToController: {

              value: '='

            },

            controller: function($scope) {

                vm = this;

                console.log('Loading Directive Controller and assign 10 to variable value');

                vm.value = 10;

                $scope.$watch('si.value', function(newVal) {

                  console.log('New value for variable!');

                });

            },

            controllerAs: 'si',

            template: '<h1>Setup Itemized</h1>' +

                    '<p>This is yuor custom directive with transclude!</p>' +

                    '<ng-transclude></ng-transclude>'

        };

    });