Aplicar atributo de estilo CSS dinamicamente em Angular JS

Este deve ser um problema simples, mas não consigo encontrar uma solução.

Eu tenho a seguinte marcação:

<div style="width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;"></div>

Eu preciso que a cor do plano de fundo seja vinculada ao escopo, então tentei o seguinte:

<div style="{width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:{{data.backgroundCol}};}"></div>

Isso não funcionou, então eu fiz algumas pesquisas e descobring-style, mas como não funcionou, tentei retirar a parte dinâmica e codificar o estilo emng-style, como isso...

<div ng-style="{width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;}"></div>

e isso nem funciona. Estou entendendo mal comong-style trabalho? Existe uma maneira de colocar{{data.backgroundCol}} em um atributo de estilo simples e fazê-lo inserir o valor?

questionAnswers(5)

yourAnswerToTheQuestion