javascript - サービスから変数として ng-patten を取得する

Question

こんにちは、ページ全体で多くのフォーム検証が必要なアプリを実行しているため、コントローラー間で使用しているサービスから検証パターンを取得しようとしています。

ここでの問題は、正しいメール アドレスを入力しても ng-pattern が正しく反応しないことです。

これはプランカーで、フォームのコードは次のとおりです。

    <form method="POST" action="#" name="newsletterForm" id="newsletterForm" ng-controller="newsletterForm" novalidate>
        <input ng-pattern="/{{patterns.email}}/" type="email" name="email" ng-model="email" required />
        <button type="submit">Invia</button>
        {{newsletterForm.email.$error.pattern}}
    </form>

これは app.js コードです

var app = angular.module('plunker', []);
app.controller('MainCtrl', function(){});
app.service('validationPatterns', function() {
    this.getPatterns = function() {
        return {
            email:  "^([a-zA-Z0-9\'\.\-\_]{2,64})([\@]{1})([a-zA-Z0-9\.\-\_]{2,64})([\.]{1})([a-zA-Z]{2,16})$"
        }
    }
});
app.controller('newsletterForm', function($scope, validationPatterns){
    $scope.patterns = validationPatterns.getPatterns();
});

angularが入力タグ内のパターンをレンダリングするときに、バックスラッシュをエスケープしてレンダリングすることが問題であると思います

^([a-zA-Z0-9'.-_]{2,64})([@]{1})([a-zA-Z0-9.-_]{2,64})([.]{1})([a-zA-Z]{2,16})$

サービスに二重のバックスラッシュを追加して角度を正しくレンダリングしようとしましたが、まだ機能していません。何か案は？