正常情况（即非动态插入 DOM 对象）下，ng-click这样的指令之所以有效（即点击之后能调用注册在可见作用域里的方法），是因为 angular 在 compiling phase（编译阶段）将宿主 DOM 对象（即加入了ng-click指令的 DOM 对象）绑定在当前作用域内了。
换言之，当前作用域知道有这个绑定了ng-click的 DOM 对象存在，所以ng-click才会起作用。
而在你的例子里，HTML 片段是在 compiling phase 后动态插入到 DOM 树中的，即便你写了ng-click，当前的作用域也不知道这个指令的存在，所以才会无效。
因此，当你动态插入 HTML 片段的时候，要手动调用$compile服务并将这个 DOM 对象绑定给当前的作用域（或其他可见作用域，这要看你的应用逻辑了），具体方法如下：
// 在某一个 controller 中，假设用 jQuery 动态插入一个 HTML 片段……$('selector').html($compile('<button ng-click="submitForm()">' + 'Submit' + '</button>')(scope));
注意要先注入$compile服务。
另外，这种方式明显太“恶心”，还有一个更好的办法（但是大量动态插入会有性能损耗）就是利用ng-repeat指令，举个例子：
<!-- 在要动态插入的地方…… --><div class="form-control" ng-repeat="fragment in fragments"><button ng-click="submitForm()">{{fragment.text}}</button></div>
这里的fragments就是一个空数组（初始状态），所以一开始这里ng-repeat不会有任何作用，然后你写一个方法来触发动态插入的动作，把一个类似{ text: 'Submit' }这样的对象push到这个空数组中，ng-repeat就会“帮”你把 DOM 对象插入了，并且ng-repeat本身就会重新 compile 内涵的 DOM 对象，因此ng-click会如你所愿的生效。
以上两个例子里我都去掉了你的submit-form指令，因为没有必要。如果你要把它写成指令，那么你应该学习ng-repeat的方法，简单的说就是监视一个 expression（比如item in items），当items变化的时候，重新 compile 内涵的 HTML 模版。
