Angularjs – Error: [$parse:lexerr] Lexer Error: Unexpected next character at columns 26-26 [&] in expression [http://placehold.it/100×50&text=slide5]

I am new to Angularjs. I am trying to define a directive that will make use of the arguments used in the custom element in the following maner..

We call the directive using the following html:

<ac-thumbnail slidenum='5' thumbsrc="http://placehold.it/100x50&text=slide5" class='active'></ac-thumbnail>

The directive I am trying to generate should output the follwoing html:

<li data-target='#carousel-custom' data-slide-to='4'><img src='http://placehold.it/100x50&text=slide5' alt='' /></li>

The directive is defined with the following code:

angular.module('testAppApp')
  .directive('acThumbnail', function () {
    return {
  template: '<li data-target="#carousel-custom" data-slide-to="{{slidenum}}"><img ng-src="{{thumbsrc}}" alt="" /></li>',
      restrict: 'EA',
      controller: 'ActhumbnailCtrl',
      scope: {
        slidenum: '=slidenum',
        // thumbsrc: '=thumbsrc',
      }  
    };
  });

If I uncomment the line // thumbsrc: '=thumbsrc', it almost works, generating the following HTML:

<ac-thumbnail slidenum="5" thumbsrc="http://placehold.it/100x50&amp;text=slide5" class="active ng-isolate-scope">
    <li data-target="#carousel-custom" data-slide-to="5"><img alt=""></li>
</ac-thumbnail>

On the other hand if I don't comment out that line I get the following error:

    Error: [$parse:lexerr] Lexer Error: Unexpected next character  at columns 26-26 [&] in expression [http://placehold.it/100x50&text=slide5].
http://errors.angularjs.org/1.3.13/$parse/lexerr?p0=Unexpected%20nextharacter%20&p1=s%2026-26%20%5B%26%5D&p2=http%3A%2F%2Fplacehold.it%2F100x50%26text%3Dslide5
    at REGEX_STRING_REGEXP (http://localhost:9000/bower_components/angular/angular.js:63:12)
    at Lexer.throwError (http://localhost:9000/bower_components/angular/angular.js:11839:11)
    at Lexer.lex (http://localhost:9000/bower_components/angular/angular.js:11798:16)
    at Parser.parse (http://localhost:9000/bower_components/angular/angular.js:11959:30)
    at $parse (http://localhost:9000/bower_components/angular/angular.js:12678:39)
    at http://localhost:9000/bower_components/angular/angular.js:7652:29
    at forEach (http://localhost:9000/bower_components/angular/angular.js:331:20)
    at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7627:11)
    at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7078:13)
    at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7081:13)

I have two questions regarding this issue:

1. Why am I getting this error when trying to access the attribute with a URL in it? How can I fix it?

2. Is there a way to create the directive so that the ac-thumbnail tag does not appear in the final HTML code?

Thanks
Oriol