AngularJS environment

HTML

<div ng-app="MyApp">
    
    <radio-environment environment="environment" change-environment="environmentChange()"></radio-environment>

    <div style="margin-top: 15px;">
        App Environment: {{ environment }}
    </div>
    
</div>

JavaScript

angular.module('MyApp', [])

.controller('mainController', ['$scope'],
    function(scope) {
                
        scope.environmentChange = function() {
            console.log('Changing to environment ' + scope.environment);
        };
                
        scope.watch("environment", function(newValue, oldValue) {
            scope.environmentChange();
        });
                
    })

.directive('radioEnvironment', function() {
    return {
        scope: { 
            environment: '='   // two-way binding
        },
        restrict: 'E',
        replace: true,
        template: '<div><label ng-repeat="choice in choices">'
                    + '<input type="radio" name="env" ng-model="$parent.environment"  value="{{ choice.id }}" />{{ choice.name }}'
                    + '</label>'
        + '<div>Directive environment: {{ environment }}</div>'
        + '<button ng-click="environment=2">set enviroment to 2</button></div>',
        link: function(scope, element, attributes) {
            scope.choices = [
                { id: 1, name: "Testing" },
                { id: 2, name: "Production" }
            ];
            
            scope.changeEnvironment = function(choice) {
                console.log('SELECTED environment ' + choice.id);
                scope.environment = choice.id;
                console.log('directive environment = ' + scope.environment);
            };
            
        }
    };
});