I am trying some code related to Angular with Visualforce. Here I am trying to implement modal in https://angular-ui.github.io/bootstrap/#/modal

Now when I use a templateURL and give a new apex as url, then I get the error mentioned in subject.

Code snippet for angular template -

$scope.open = function() {
           var modalInstance = $uibModal.open({
            animation: $scope.animationsEnabled,
            templateUrl: '/apex/newProjectForm',
            controller: 'ModalInstanceCtrl',
            size: 'lg',
            resolve: {
              items: function () {
                return $scope.list5;

           modalInstance.result.then(function (selectedItem) {
            console.log('2-->', $scope.user);

          }, function () {
            $log.info('Modal dismissed at: ' + new Date());

For the newProjectForm.apge -

<apex:page showHeader="false" controller="NewProjectController">
    <style type="text/css">
    body {
        min-width: 200px;
                <apex:inputField value="{!projectInstance.Name}"></apex:inputField>
                <apex:inputField value="{!projectInstance.Start_Date__c}"></apex:inputField>


I understand somehow angular is not able to understand the colon : in "apex:inputfield", but not sure that how I can solve it.

Update 1 ok, I checked again and I cannot find mark up of modal in page. not sure how angular loads it internally

Update 2 The actual only seems to be because of Salesforce way to putting id to elements. so I gave Ids to apex:page as well as apex:form so the error that I am getting is -

Syntax Error: Token ':' is an unexpected token at column 13 of the expression [completePage:completeForm] starting at [:completeForm].

Where "completePage" is id of page and "completeForm" is the id of form.



  • I assume that the content that arrives in the browser will have had the Visualforce tags replaced by HTML. (Use your browser's "View Source" on any Visualforce page and you will see the big changes applied by Visualforce.) Your page has no Angular markup in it so this is a strange mix you are using.
    – Keith C
    Oct 31, 2015 at 18:58
  • The VF page that I have added is just the page that should get open in template, if you need I can add snippets of the main page as well
    – SEuser
    Oct 31, 2015 at 19:01
  • @KeithC , I checked the source and added Update 1 in description.
    – SEuser
    Oct 31, 2015 at 19:06
  • Changed again..
    – SEuser
    Oct 31, 2015 at 19:22
  • Have you tried to give ids to the elements?
    – mischczu
    Nov 1, 2015 at 18:31

2 Answers 2


This is a problem caused by AngularJS using jQuery and appears to be a known limitation (see issue 13771); jQuery treats colons as special selectors so ids with colons break the parser. Your options are to either override the form directive or move the apex:form tag outside of your Angular app, which is what I did.


The way I solved it is to use a built in Angular directive that tells Angular to not parse that element.

The directive is called ng-non-bindable. You can put it on any element that you do not want parsed.

<apex:form html-ng-non-bindable="true" id="theForm">

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .