title: How to set border style for img element in AngularJS
body: <p>This is a beginners question in AngularJS. </p>
  
  <p>I'm writing a simple application to show a few images and allow the user to toggle selection. Only one image should be selected at any one time.</p>
  
  <p>Anyway, how to set the style to change the border for the <code>img</code> tag. When the user clicks on an image the style should be set. Neither setting the style or custom style <code>myStyle</code> is working (style not applied).</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app&gt;
  &lt;head&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"&gt;&lt;/script&gt;
  
      &lt;script &gt;
          function myCtrl($scope, $window) {
              $scope.vm = {};
              $scope.vm.Courses = [
                { Id: 1, Name: "Course 1"},
                { Id: 2, Name: "Course 2"}
                ];
  
              $scope.ToggleCourse = function(imageElement) {
                  console.log("id = " + imageElement.id);
                  imageElement.style = "{border:'2px solid blue'}"; // doesnt work
                  imageElement.myStyle = "{border:'2px solid blue'}"; // neither does this///
              }
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="myCtrl"&gt;
      &lt;div&gt;
          &lt;div ng-repeat="course in vm.Courses"&gt;
              &lt;div&gt;
                  &lt;div ng-click="ToggleCourse($event.target)"&gt;
                      &lt;label&gt;{{course.Name}}&lt;/label&gt;
                      &lt;img id="card{{course.Id}}" src="course.png" ng-style="myStyle"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>