angular.module('MyApp')

.directive('subScope', ['subScopeUtils', function (util) {
	var directive = util.directive()

	directive.link = function (scope, element, attrs, controller, transclude) {
		var key = attrs.subScope
		var model = util.model(key)

		scope.$watch('string', function(value) {
			if (value.indexOf('Got in:') === 0)
				return // prevent infinite calls
			model.assign(scope.$parent, 'Got out: ' + value)
		})

		scope.$parent.$watch(key, function(value) {
			if (value.indexOf('Got out:') === 0)
				return // prevent infinite calls
			scope.string = 'Got in: ' + value
		})

		util.transcluder(scope, element, transclude)
	}

	return directive
}])

.factory('subScopeUtils', function ($parse) {
	var util = {}

	util.model = function (expression) {
		return $parse(expression)
	}

	util.directive = function () {
		var result = {}
		result.scope = true
		result.transclude = true
		result.template = '<input style="color: red" ng-model="string">'
		return result
	}

	util.transcluder = function (scope, element, transclude) {
		var cloneLinker = function (clone) {
			if (clone.length !== 0) // If transcluded element is non-empty,
				element.empty() // Remove already appended template
			element.append(clone)
		}
		transclude(scope, cloneLinker)
	}

	return util
})