title: Grab $(this) element's html and insert into $scope.variable
body: <p>I am trying to grab the <code>buttons</code> html with <code>.html()</code> and insert into <code>$scope.player</code>. The button is calling the <code>choosePlayer()</code> function with <code>ng-click</code> but it is not working.</p>
  
  <p>Here's the codepen link: <a href="http://codepen.io/theMugician/pen/ojJrRp" rel="nofollow">http://codepen.io/theMugician/pen/ojJrRp</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body ng-app="ticTacToe" ng-controller="MainCtrl"&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-12 text-center"&gt;
        &lt;h1&gt;TIC TAC TOE&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="wrapper" class="container text-center"&gt;
    &lt;div class="row"&gt;
      &lt;div ng-click="move(cell)" ng-repeat="cell in cells" class="col-xs-4 square text-center"&gt;
        {{cell.value}}
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;div class="container"&gt;
    &lt;div class="row text-center"&gt;
      &lt;h1&gt;CHOOSE A SHAPE&lt;/h1&gt;
      &lt;button ng-click="choosePlayer()" class="btn btn-red" id="choose-cross"&gt;✖&lt;/button&gt;
      &lt;button ng-click="choosePlayer()" class="btn btn-green" id="choose-circle"&gt;&amp;#9711;&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>JAVASCRIPT</p>
  
  <pre><code>var app = angular.module("ticTacToe", []);
  app.controller("MainCtrl", function($scope){
    var cell = $(".square");
    $scope.player = "";
    var cross = "×";
    var circle = "◯";
  
    $scope.choosePlayer = function(){
      $scope.player = $(this).html();
    }
  
    $scope.cells = [ { value: '' }, { value: '' }, { value: '' }, 
       { value: '' }, { value: '' }, { value: '' } ,
      { value: '' }, { value: '' }, { value: '' }  
    ];
  
    $scope.move = function(cell){
      cell.value = $scope.player;
    };
  
  });
  </code></pre>