AngularJs指令添加属性，同时观察循环中的变化

Question

这个问题与前一个问题有关 AngularJs Directive to add Attributes, the events are not triggered

感谢我的另一个问题，现在任何ng- *属性都可以正确执行，但是我发现自己不在墙上，我需要看属性所以我评论了removeAttribute，但现在的问题是它被卡住了一些$ compile循环....我认为它一直在替换html标签，因为我没有删除属性，所有内容都重新开始，直到我收到错误：

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!


.directive('updateAttr', ['$compile', function ($compile) {
                return {
                    restrict: 'A',
                    replace: true,
                    priority: 10,
                    link: function (scope, elem, attrs) {
                        function IsJsonString(str) {
                            var json = "";
                            try {
                                json = JSON.parse(str);
                            } catch (e) {
                                return false;
                            }
                            return json;
                        }
                        scope.$watch(function () {
                            return elem.attr('property');
                        }, function (currentProperties) {
                            var currentJson = IsJsonString(currentProperties);
                            angular.forEach(currentJson, function (value, key) {
                                elem.attr(key, value);
                            }
                            });
                            //elem.removeAttr('property'); 
                            var $e = $compile(elem[0].outerHTML)(scope);
                            elem.replaceWith($e);

                        });

                    }
                }
            }]);

关于如何解决它的任何想法？

http://jsfiddle.net/3oaha6z4/6/