Apply <strong> tags to a string in my js.coffee file

Question

I am currently using Angular and Slim in my Ruby On Rails Project. I have an array of questions in my js.coffee that are currently being rendered in my view.

One of the strings in the array has strong tags, but it is not being displayed properly in my html.

Instead of getting Standard, I get this...

On which Playfield is the <strong>Standard</strong> game played ?

I am fairly new to angular, what am I missing?

JAVASCRIPT

game_create_ctrl.js.coffee

angular.module('OombangularApp').controller 'GameCreateCtrl', [
  '$scope', '$sce', '$uibModal', 'Game', 'GameFormat', 'PlayfieldType', 'Persona',
  ($scope, $sce, $uibModal, Game, GameFormat, PlayfieldType, Persona) ->

    $scope.step = 1

    ###This works...when it is not an Array
    $scope.html = "On which Playfield is the " + "<strong>Standard</strong>" + " game played ?"
    $scope.stepQuestion = $sce.trustAsHtml($scope.html)        

    ###How do I show the <strong> tags in my view when its an array?

    $scope.stepQuestions = ['What should this Game be called?', 'What should this Game be called?',
                        'What category does this Game belong to?',
                        'On which Playfield is the <strong>Standard</strong> game played ?',
                        'What is the Player Configuration?', 'How is a <strong>Standard</strong> game won?', 'Which Persona owns this Game?']

]

    $scope.stepQuestions = $scope.stepQuestions.map (item) -> $sce.trustAsHtml(item)

VIEWS

new.html.slim

form[name='gameCreateForm' ng-controller='GameCreateCtrl']

    ###This Works
    .question ng-bind-html="stepQuestion"{{ stepQuestion }}

    ###This doesnt
    .question ng-bind-html="stepQuestions"{{ stepQuestions[step - 1] }}

Answer 1

Please try: angularjs to output plain text instead of html (similar issue) or https://docs.angularjs.org/api/ng/directive/ngBindHtml