AngularJS different model schemas in model array

I've been working on an angularjs project and walked into a problem which I can't seem to solve. The problem is that I've an controller which has an array which represents several exams. 

function ExamCtrl($scope) {
    $scope.exams = [{
        "title" : "Some fancy title",
        "owner" : "John Smith",
        "questions" : [
            {"type" : "openquestion", "question" : "Is cheese yummy?", "answer" : "Yes"},
            {"type" : "mcquestion", "question" : "Is cheese yummy?", "answers" : [{"a" : "Yes"}, {"b" : "No"}]}
        ]
    }];
}

Like you can see there is an array in the exams object which contains several question objects. Each of these objects have a different schema (openquestion, mcquestion etc). I can guarantee that each object with a specific questiontype has the same schema.

The problem that I'm facing is rendering the correct HTML belonging to each of the questiontypes. In the tutorial on the angularjs webpage they use 

<li ng-repeat="question in exams.questions>{{question.type}}</li>

The problem with this approach is that I can't make differences between different question types. I have been trying to solve this problem with directives and have been fighting heavily with the compile and link functions, but haven't been able to find a good solution.

Well, here is a working fiddle

One of the bigger changes I made to your exam model structure was I made "answers" a dictionary object rather than an array, and I'm storing the actual selected answer in question.answer in all questionType cases.

The markup is a little tricky I guess:

    <ul ng-repeat="exam in exams">
        <li ng-repeat="question in exam.questions">
            <p>{{question.question}}</p>
            <div ng-switch on="question.type" >
                <div ng-switch-when="openquestion">
                    <textarea ng-model="question.answer"></textarea>                        
                </div>
                <ul ng-switch-when="mcquestion">
                    <li ng-repeat="(key, value) in question.answers">
                        <label>
                        <input ng-model="$parent.question.answer" value="{{value}}" type="radio"/>
                            {{key}} ) {{value}}
                        </label>
                    </li>                        
                </ul>
              </div>
        </li>
    </ul>

And here's the JS behind it:

app.controller('MainCtrl', function($scope) {
   $scope.exams = [{
        "title" : "Some fancy title",
        "owner" : "John Smith",
        "questions" : [
            {"type" : "openquestion", "question" : "Is cheese yummy?", "answer" : "Yes"},
            {"type" : "mcquestion", "question" : "Is cheese yummy?", "answers" : { a: "Yes", b: "No" }, "answer" : "No"}
        ]
    }];
});

​

I hope that helps.