IBM Worklight v6.1.0.1 : Error when using Ionic Framework with Worklight and run on IOS environment

I have created demo app using Ionic with Worklight and it worked on Android but got error on IOS, when i used mobile browser simulator and debugged on IOS environment, i got the folowing error message:

Uncaught InvalidCharacterError: Failed to execute 'add' on 'DOMTokenList': The token provided ('platform-ios - iphone') contains HTML space characters, which are not valid in tokens.

I just add Ionic files in index.html:

<!DOCTYPE HTML>
<html>
        <head>
            <meta charset="UTF-8">
            <title>index</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
            <link rel="shortcut icon" href="images/favicon.png">
            <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
            <link rel="stylesheet" href="css/main.css">
            <link rel="stylesheet" href="ionic/css/ionic.css">
            <script src="ionic/js/ionic.bundle.js"></script>
        </head>
        <body style="display: none;">
            <!--application UI goes here-->
            <div class="bar bar-header bar-positive">
                <h1 class="title">bar-positive</h1>
            </div>
            <script src="js/initOptions.js"></script>
            <script src="js/main.js"></script>
            <script src="js/messages.js"></script>
        </body>
</html>

I also tested on mobile device on both Android and IOS and only got error on IOS device.

I don't know how to fix this. Can anyone help? Thanks.

update May 28th: here is a blog post about Worklight and Ionic with a full sample project: http://mobileroly.blogspot.co.il/2014/04/using-angular-js-and-ionic-on-ibm.html

Well, this seems like some incompatibility between the ionic framework and Worklight.
Worklight does not officially support ionic.

The MBS sends "ios - iphone".
ionic in turn does not like that because there are spaces...

I don't quite know what ionic expects to have there, but you can overcome the error by finding this code in the ionic.bundle.js file:

for(var i = 0; i < ionic.Platform.platforms.length; i++) {
    document.body.classList.add('platform-' + ionic.Platform.platforms[i]);
}

And replacing it with the following.
The error will be gone.

for(var i = 0; i < ionic.Platform.platforms.length; i++) {
    if (ionic.Platform.platforms[i] = "ios - iphone") {
       document.body.classList.add('platform-ios');  
       // or maybe 'platform-ready', I don't know...
    } else {
       document.body.classList.add('platform-' + ionic.Platform.platforms[i]);
    }
}

This, however, does not help in displaying the app in the MBS...
But at least you can then run in Xcode's iOS Simulator to see the app.

It seems that ionic and Worklight's iPhone/iPad environments don't play well together.

index.html:

<head>
    ...
    ...
    <link href="ionic/ionic.css" rel="stylesheet">
    <script src="ionic/ionic.bundle.js"></script>
</head>

<body ng-app="ionicApp">
    <div class="bar bar-header bar-positive">
        <h1 class="title">bar-positive</h1>
    </div>
    <div style="margin-top:38px">
        <p>test test test</p>
    </div>
    ...
    ...
</body>

main.js:

angular.module('ionicApp', ['ionic']);

enter image description here