Как проверить некоторые недопустимые символы?

Question

[zlodiak]

Есть форма, состоящая из одного поля. Есть набор символов, которые допустимы в этом поле. В результате валидация отрабатывает без проблем.

<form name='f1'>
  <input type="text" name="i1" ng-model="i1" required ng-pattern="/^[A-Za-z0-9!#$%&'()*+,-./:;<=>?@^_`{|}~]+$/">
  <button ng-click="send(f1)">send</button>

  <errors>
    <error ng-if="f1.i1.$error.required && f1.i1.$touched">
      обязательное поле
    </error>

    <error ng-if="f1.i1.$error.pattern && f1.i1.$touched">
      недопустимый символ
    </error>
  </errors>
</form>

import HomeCtrl from './home.controller';
homeModule.controller('HomeCtrl', HomeCtrl);

function HomeCtrl($scope) {
  $scope.i1 = null;

  function send(f1) {
    console.log(f1)
  }
}

Проблема в том, что мне нужно использовать немного другой набор символов. Такой:

ng-pattern="/^[A-Za-z0-9!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]+$/"

Но я не понимаю как это сделать. Возникают проблемы с кавычками, с прямоугольными скобками и т.д. При этом экранирование символом \ не помогает.

Помогите пожалуйста исправить код в DEMO