Angular: ng-include scope

http://angularjs.org/

by nomadev

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<div ng-controller="myCtrl">
  <form name="form" class="">
      <div class="">
          <div class="radio radio-dati mb30">
              <label>
                  <input type="radio" ng-model="model.emailSmsRadio" name="emailSmsRadio" value="mail" checked="checked" required>
                  <span class="radio-text radio-text-tworow mr30">
                    ${properties.pickEmailLabel}<br />
                    ${properties.emailPrefix} <strong>{{$wizardCtrl.mailHashed}}</strong>
                </span>
              </label>
          </div>
          <div class="radio radio-dati mb30">
              <label>
                  <input type="radio" ng-model="model.emailSmsRadio" name="emailSmsRadio" value="sms" required>
                  <span class="radio-text radio-text-tworow">
                    ${properties.pickSmsLabel}<br />
                    ${properties.smsPrefix} <strong>{{$wizardCtrl.telHashed}}</strong>
                </span>
              </label>
          </div>
      </div>

      <a href="javascript:void(0)" ng-click="$$goto('send-document')">${properties.noValidContactLink}</a>
  </form>
  <div>
    {{form.$valid}}
  </div>
  
  
</div>

JavaScript

var app = angular.module('myApp', []);
var lodash = _.noConflict();

(function () {
    'use strict';

    app.directive('ltmClearInput', directive);
    directive.$inject = ['$compile'];


    /** @ngInject */
    function directive($compile) {

        function directiveController($scope, $element) {
						var $ctrl = this;
            var container = $element.parent();
            var icon = '<i class="glyphicon glyphicon-remove" ng-click="$ctrl.clear()">X</i>';


            $ctrl.clear = function (e) {
                $element.val(null);
                this.hideClearInput();
            }

            $ctrl.showClearInput = function () {
                if (! lodash.isEmpty(container.find('i'))) return;
                container.addClass('show-clear-icon');
                var compiled = $compile(icon)($scope);
                $element.after(compiled);
            }

            $ctrl.hideClearInput = function () {
                if (! $element.val()) {
                    $element.next().detach();
                    $element.removeClass('show-clear-icon');
                }
            }
        }
        directiveController.$inject = ['$scope', '$element'];

        function link(scope, elem, attrs, ngModel) {
            scope.$watch(function () {
                return ngModel.$modelValue;
            }, function (val) {
                if (val) {
                    scope.$ctrl.showClearInput();
                } else {
                    scope.$ctrl.hideClearInput();
                }
            });
        }

        return {
            require: 'ngModel',
            bindToController: true,
            controller: directiveController,
            controllerAs: '$ctrl',
            link: link,
            restrict: 'A',
            scope: {}
        }
    }

}());

app.controller('myCtrl', myCtrl);
function myCtrl($scope, $http) {
	$scope.test = 'ciao'
}
myCtrl.$inject = ['$scope', '$http'];